在ajax脚本中添加和删除按钮中的类

时间:2012-08-05 22:52:21

标签: jquery ajax class function click

我有以下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(){

但是当我使用课程时。当我只使用按钮类时,我需要做些什么更改才能让这个脚本添加或删除类到哪个按钮?

1 个答案:

答案 0 :(得分:2)

您应该对选择器进行填充,请尝试以下操作:

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