Question

我有一个类名为测试按钮测试按钮 - 检查的按钮。点击测试按钮 - 检查后，它应该执行某些操作并替换为类测试按钮 - 重置

对于测试按钮 - 重置我想写另一个功能，但它不起作用。因为，上一个函数再次执行。

$(".test-button--check").on("click", function() {
  alert("Check is clicked");
  $(this).removeClass("test-button--check").addClass("test-button--reset");
});

$(".test-button--reset").on("click", function() {
  alert("Reset is clicked");
  $(this).removeClass("test-button--reset").addClass("test-button--check");
});

我该怎么办？

由于

Answer 1

尝试使用.off（）删除事件处理程序，在这种情况下，单击它。

应该是这样的：

$('.test-button.test-button--reset').off().click(function() {...});

Answer 2

您可以通过这种方式在document.ready中编写代码

$(".test-button--check .test-button--reset").on("click", function(e) {
   e.preventDefault();
   var obj=$(this);
   if($(obj).hasClass('test-button--check')){
       alert("Check is clicked");
       $(this).removeClass("test-button--check").addClass("test-button--reset");
   }
   if($(obj).hasClass('test-button--reset')){
       alert("Reset is clicked");
       $(this).removeClass("test-button--reset").addClass("test-button--check");
   }
});

Answer 3

我认为这会奏效：

var check = function checkFunc() {
alert('Check is clicked!');
$(this).addClass('test-button--reset').removeClass('test-button--check');
$('.test-button--reset').unbind('click',check);
$('.test-button--reset').bind('click',reset);
}
var reset = function resetFunc() {
alert('Reset is clicked!');
$(this).addClass('test-button--check').removeClass('test-button--reset');
$('.test-button--check').unbind('click',reset);
$('.test-button--check').bind('click',check);
}
$('.test-button--check').bind('click',check);

使用bind和unbind

JQuery单击具有不同类的相同按钮

3 个答案: