收藏自定义帖子类型

时间：2016-08-04 作者：Stephen

因此，我构建了这个主题，以便客户端可以向WordPress网站添加属性。

在这个主题中，我构建了一个收藏夹系统，但我似乎在自定义帖子类型列表页面上使用收藏夹按钮时遇到了问题。

The Problem:每次我点击收藏夹按钮，它都会喜欢列表中的第一篇帖子，而不是我点击的那篇。下图说明：

First Image

在此图像中，它将并排显示3个属性，其中星形图标是最喜爱的按钮。

Second Image

在这张图片中，第一颗星不见了，但我单击了最右侧属性上的那颗星。

我唯一的想法是，在jQuery中，我没有找到那个属性ID，而只是找到一个<i> 元素并将其隐藏。

jQuery代码：

$(\'a#add-to-favorite\').click(function(eve){
    eve.preventDefault();
    eve.stopPropagation();
    var $star = $(this).find(\'i\');
    var add_to_fav_options = {
        target:        (\'#fav-target\'),   // target element(s) to be updated with server response
        beforeSubmit:  function(){
            $star.addClass(\'fa-spin\');
        },  // pre-submit callback
        success: function(){
            $star.removeClass(\'fa-spin\');
            $(\'#add-to-favorite\').hide(0,function(){
                $(this).find(\'#fav-output\').delay(200).show();
            });
        }
    };

    $(\'#add-to-favorite-form\').ajaxSubmit( add_to_fav_options );
});
最喜爱的代码：

<span class="add-to-fav">
    <?php
    $property_id = get_the_ID();
    if(is_added_to_favorite($property_id)) {
        ?>
        <div id="fav-output" class="show">
            <i class="fa fa-star"></i>&nbsp;
            <span id="fav-target">Added to Favourites</span>
        </div>
        <?php
    } else {
        ?>
        <form action="<?php echo admin_url(\'admin-ajax.php\'); ?>" method="post" id="add-to-favorite-form">
            <input type="hidden" name="property_id" value="<?php echo $property_id; ?>">
            <input type="hidden" name="action" value="add_to_favorite">
        </form>
        <div id="fav-output">
            <i class="fa fa-star"></i>&nbsp;
            <span id="fav-target">Added To Favourites</span>
            <span id="property-target-<?php echo $property_id; ?>" data-property-id="<?php echo $property_id; ?>"></span>
        </div>
        <a href="#add-to-favorite" id="add-to-favorite">
            <i class="fa fa-star-o"></i>&nbsp;
            <span class="add-to">Add to Favourites</span>
        </a>
        <?php
    }
    ?>
</span>

1 个回复
最合适的回答,由SO网友:Adam 整理而成

您不应该多次使用元素ID，而应该使用类。

无需太多细节，请尝试以下调整。。。

更改以下内容：

<a href="#add-to-favorite" id="add-to-favorite">
    <i class="fa fa-star-o"></i>&nbsp;
    <span class="add-to">Add to Favourites</span>
</a>
。。。到

<a href="#add-to-favorite" class="add-to-favorite">
    <i class="fa fa-star-o"></i>&nbsp;
    <span class="add-to">Add to Favourites</span>
</a>
将JS更改为：

$(\'a.add-to-favorite\').click(function(eve){
    eve.preventDefault();
    eve.stopPropagation();
    var $context = $(this); //cache the click context here
    var $star = $context.find(\'i\');
    var add_to_fav_options = {
        target:        (\'#fav-target\'),   // target element(s) to be updated with server response
        beforeSubmit:  function(){
            $star.addClass(\'fa-spin\');
        },  // pre-submit callback
        success: function(){
            $star.removeClass(\'fa-spin\');
            $context.hide(0,function(){
                //find the #fav-output element based on click context
                $context.find(\'#fav-output\').delay(200).show();
            });
        }
    };

    $(\'#add-to-favorite-form\').ajaxSubmit( add_to_fav_options );
});
注：未测试

更新#2：

JavaScript。。。

$(\'.add-to-fav\').click(function(eve){
    eve.preventDefault();
    eve.stopPropagation();
    var $context = $(this); //cache the click context here
    var $add_to_favorite = $context.find(\'a.add-to-favorite\');
    var $star = $add_to_favorite.find(\'i\');
    var add_to_fav_options = {
        target: $context.find(\'.fav-target\'), // target element(s) to be updated with server response
        beforeSubmit:  function(){
            $star.addClass(\'fa-spin\');
        },  // pre-submit callback
        success: function(){
            $star.removeClass(\'fa-spin\');
            $add_to_favorite.hide(0,function(){
                //find the #fav-output element based on click context
                $add_to_favorite.find(\'.fav-output\').delay(200).show();
            });
        }
    };

    $context.find(\'.add-to-favorite-form\').ajaxSubmit( add_to_fav_options );
});
HTML。。。

<span class="add-to-fav">
    <?php
    $property_id = get_the_ID();
    if(is_added_to_favorite($property_id)) {
        ?>
        <div class="fav-output show">
            <i class="fa fa-star"></i>&nbsp;
            <span class="fav-target">Added to Favourites</span>
        </div>
        <?php
    } else {
        ?>
        <form action="<?php echo admin_url(\'admin-ajax.php\'); ?>" method="post" class="add-to-favorite-form">
            <input type="hidden" name="property_id" value="<?php echo $property_id; ?>">
            <input type="hidden" name="action" value="add_to_favorite">
        </form>
        <div class="fav-output">
            <i class="fa fa-star"></i>&nbsp;
            <span class="fav-target">Added To Favourites</span>
            <span class="property-target-<?php echo $property_id; ?>" data-property-id="<?php echo $property_id; ?>"></span>
        </div>
        <a href="#add-to-favorite" class="add-to-favorite">
            <i class="fa fa-star-o"></i>&nbsp;
            <span class="add-to">Add to Favourites</span>
        </a>
        <?php
    }
    ?>
</span>

标签： custom-post-types   ajax   小码农  

相关推荐

尝试在WordPress中实现AJAX注释，遇到WP错误

我试图在WordPress中为我的评论实现Ajax，使用this tutorial. 但我在将教程中的代码集成到自己的预构建主题时遇到了问题。问题是，我要么得到一个WP错误“检测到重复注释；看来你已经说过了！”或标准500错误。以下是我得到的：下面是我对ajax的评论。js文件如下所示： * Let\'s begin with validation functions */ jQuery.extend(jQuery.fn, { /* * check i