web-dev-qa-db-ja.com

カスタム投稿タイプを支持する

だから私は、クライアントが彼らのWordPressウェブサイトにプロパティを追加できるように、このテーマを構築しました。

このテーマの範囲内で、お気に入りのシステムを構築しましたが、お気に入りのボタンを[カスタム投稿の種類]リストページで機能させるのに問題があるようです。

問題：お気に入りボタンを押すたびに、リストの最初の投稿がお気に入りになり、クリックした投稿はお気に入りになりません。以下の画像の説明：

First Image 

この画像では、3つのプロパティを並べて表示しています。スターアイコンはお気に入りのボタンです。

Second Image 

この画像では最初の星は消えていますが、右端のプロパティで星をクリックしました。

私の唯一の考えは、jQueryではそのProperty 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>
custom-post-typesajax
4
Stephen

要素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>
4
userabuser