jQuery：检测到对已更改的 class 名称的点击，该名称并非原始 class

Question

我有这个按钮可以将其 class 从最大化更改为最小化。最初它有一个最大化 class 但点击它变成最小化。现在我想抓住最小化的点击并且只最小化。

看看下面我的代码：

$('.button-maximize').off('click').on('click', function() {
    $(this).removeClass('button-maximize').addClass('button-minimize');
});

所以这会将 class 更改为最小化。显然我需要事件委托来捕捉事件。

接下来我会这样做：

$('.button-wrap').off('click').on('click', '.button-minimize:not(.button-maximize)', function() {
    alert('test');
});

澄清button-wrap就是parent。所以我的问题是 alert('test'); 当我第一次点击最大化按钮时触发。我如何告诉 jQuery 我只希望它在按钮没有 class "button-maximize" 时触发？

谢谢！

Answer 1

试试这个：

if(!$(this).hasClass("button-maximize")){
 alert('test');
}

Answer 2

你不需要在同一个按钮中使用两个事件你可以给你的按钮一个标识符 id fpr exampel button-id 然后给它附加点击事件 :

$(".button-wrap").on("click", "#button-id", function() {
    if($(this).hasClass('button-minimize')){
         alert('test');
    }else{
         $(this).removeClass('button-maximize').addClass('button-minimize');
    }
});

并且因为按钮在两个 class 之间切换，您可以检查按钮是否具有 class button-minimize（人们没有最大化 class）使用 hasClass() 方法然后显示警报，否则删除 maximize 并添加 minimize.

希望对您有所帮助。

Answer 3

只需使用任一方式点击并检查即可。

$('.button-wrap').on('click', '.button-minimize, .button-maximize', function() {
  if ($(this).hasClass('button-maximize')) {
    $(this).removeClass('button-maximize').addClass('button-minimize');
  } else {
    alert('test');
  }
});

编辑对评论的回应：这基本上是一样的，但关键是事件附加到包装器。

$('.button-wrap').on('click', '.button-maximize', function() {
    $(this).removeClass('button-maximize').addClass('button-minimize');
}).on('click', '.button-minimize', function() {
    alert('test');
});

Answer 4

有多种方法可以实现这一点。最简单的方法可能看起来像这样：

https://jsfiddle.net/x4q3nwyL/1/

$('button').on('click', function() {
    var $this = $(this);
    if ($this.hasClass('maximize')) {
      alert('test');
    }
    $this.toggleClass('maximize minimize');
});

无需解绑。单击时，您将检查它是否是最大化按钮并执行您的操作。之后，您将切换最小化和最大化类。这将导致它在每次单击时在最小化和最大化按钮之间切换。我猜这就是你想要的...

jQuery：检测到对已更改的 class 名称的点击，该名称并非原始 class

jQuery: Detect a click on a changed class name that is NOT the original class

jquery

class

button

detect