Question

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

请看下面的代码：

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

因此，这会将类更改为最小化。显然我需要事件委托才能抓住这个事件。

我接下来就这样做了：

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

澄清button-wrap是父母。所以我的问题是，当我第一次点击最大化按钮时，这个警报（'测试'）; 会触发。如果按钮没有“按钮最大化”类，我如何告诉jQuery我只想激发它？

谢谢！

Answer 1

试试这个：

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

Answer 2

您在同一个按钮中不需要两个事件，您可以为按钮添加标识符id fpr exampel button-id，然后将click事件附加到其中：

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

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

希望这有帮助。

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：检测到一个不是原始类

4 个答案: