Question

我有一个ajax函数，根据所点击链接的类别有两个结果。

单击链接时我不想重新加载整个页面，所以我使用了：

这一切都有效，但就jQuery而言，看起来好像它仍然有原始类，所以再次点击它，只是重新使用“shortlist-add”脚本而不是“shortlist-remove”脚本。

<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
    }
  });

})

更改jQuery

1 个答案: