jQueryのリンクの状態を変更

Question

クリックしたリンクのクラスに応じて2つの結果を持つajax関数があります。

リンクがクリックされたときに、私は、ページ全体をリロードする必要はありませんので、私が使用している：それはまだ元のクラスを持っているかのように

この限りjQueryのを懸念している以外のすべての作品は、それが表示されますので、もう一度クリックすると、 "shortlist-remove"スクリプトの代わりに "shortlist-add"スクリプトが返されます。

<button data-propref="261" id="prop-261" class="btn-round btn-favorite shortlist-remove"><span class="icon-hearth"></span></button>

// remove property from shortlist 
jQuery('.shortlist-remove').on('click',function() { 

    var propref = jQuery(this).data('propref'); 

    jQuery.ajax({ 
     url : ajax_object.ajax_url, 
     type : 'post', 
     data : { 
      action : 'shortlist_rem', 
      propref : propref 
     }, 
     success : function(response) { 
      jQuery('.personal-nav').load(document.URL + ' .personal-nav'); 
      jQuery('#prop-' + propref).removeClass('shortlist-remove').addClass('shortlist-add'); 
     } 
    }); 
}); 

Answer 1

メインのセレクタとして、すべての時間をとどまるクラスを使用します。

次に、他の2つのクラスに基づく条件を使用して動作を変更します。この場合はactionを切り替えます。あなたは言い換えることができます -

次に問題が何であるかは明らかではない

$('.btn-favorite').on('click', function(e) { 
    var $btn = $(this), 
    isRemove = $btn.hasClass('shortlist-remove'), 
    propref = jQuery(this).data('propref'); 

    jQuery.ajax({ 
    .... 
    data: { 
     // action determined by classes 
     action: isRemove ? 'shortlist_rem' : 'shortlist_add', 
     propref: propref 
    }, 
    success: function(response) { 

     // toggle the classes now that ajax successful 
     $btn.toggleClass('shortlist-remove shortlist-add'); 

     // other stuff 
    } 
    }); 

})