jquery - 从 ajax 脚本中的按钮添加和删除类

Question

我有以下 jQuery/ajax 脚本：

jQuery("input.button").click(function(){
   jQuery.ajax({       
      url: 'addfav.php',
      type: 'POST',
      data: {'id':jQuery(this).closest("div").attr("id"),is_ajax: 1},
      success: function(html) {
        jQuery(this).removeClass('before');
        jQuery(this).addClass('after');
        jQuery(this).attr('disabled', 'disabled');
      }, 
      error: function() {
        jQuery('#error').html('<div>Error! Unable to add food item.</div>');
      }
    });
});

哪个处理点击这些按钮：

<div id="32"><input type="button" class="button before"/></div>
<div id="33"><input type="button" class="button before"/></div>

但是，添加和删除类到任何一个但被单击的对象都不起作用。它适用于具有 ID 的单个按钮，即：

jQuery("input#button1").click(function(){

但不是当我使用类时。当我只为按钮使用类时，我需要进行哪些更改才能让此脚本向单击的任何按钮添加或删除类？

Answer 1

您应该缓存选择器，尝试以下操作：

jQuery("input.button").click(function(){
   var $this = $(this);
   jQuery.ajax({       
      url: 'addfav.php',
      type: 'POST',
      data: {'id': $this.closest("div").attr("id"),is_ajax: 1},
      success: function(html) {
        $this.removeClass('before');
        $this.addClass('after');
        $this.attr('disabled', 'disabled');
      }, 
      error: function() {
        jQuery('#error').html('<div>Error! Unable to add food item.</div>');
      }
    });
});