Question

我想我正在尝试做一件简单的事情，但可能我会想念一些事情。我有这个小HTML

<div class="open"> OPEN</div>

使用这个简单的CSS：

.open {
   color: green;
}

.close {
   color: red;
}

现在想要在div上捕获.click（）事件，但我想选择带有类选择器的事件。第二，我需要更改类并再次捕获基于类的不同.click（）事件。所以我使用了这个JQuery代码：

$('.open').click(function() {
  alert('open');
  $(this).removeClass('open');
  $(this).addClass('close');
  $(this).text('CLOSE');
});

$('.close').click(function() {
  alert('close');
  $(this).removeClass('close');
  $(this).addClass('open');
  $(this).text('OPEN');
});

但这不起作用：

首先点击：右键提醒，课程更改，文字更改
第二次点击：错误提醒，课程未更改，文字未更改

您可以查看此jsfiddle：JsFiddle Example

你能帮帮我吗？感谢

Answer 1

您只需执行以下操作：

$('.open').click(function(){
     var txt = $.trim(this.textContent) == "OPEN" ? "CLOSE" : "OPEN";
    $(this).toggleClass('open').text(txt);
    // $(this).toggleClass('open close').text(txt);
    // use the commented line if you want to toggle the classes on each click.
});

.open {
   color: green;
}

.close {
   color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="open"> OPEN</div>

Answer 2

你需要事件委托。因为在开头，没有类关闭的div，点击处理程序被分配给任何东西。

只需包裹你的div 打开并将点击处理程序分配给主div

$('.wrapper').on("click", ".open",function() {
  alert('open');
  $(this).removeClass('open');
  $(this).addClass('close');
  $(this).text('CLOSE');
});

$('.wrapper').on("click", ".close",function() {
  alert('close');
  $(this).removeClass('close');
  $(this).addClass('open');
  $(this).text('OPEN');
});

而不是$(this).removeClass('close'); $(this).addClass('open');，请您考虑使用$(this).toggleClass('open close');

https://jsfiddle.net/ezxe9ca8/2/

Answer 3

试试这个，

$('.general').click(function() {

 var status = $(this).attr('data-status');
 if(status == 'open') {
    alert('open');
    $(this).removeClass('open');
    $(this).addClass('close');
    $(this).text('CLOSE');
    $(this).attr('data-status', 'close');
 } else if(status == 'close') {
    alert('close');
    $(this).removeClass('close');
    $(this).addClass('open');
    $(this).text('OPEN');
    $(this).attr('data-status', 'open');
 }

});

然后将class应用于div

    <div class="open general" data-status='open'> OPEN</div>

Answer 4

问题是事件处理程序绑定到HTML元素。在这种情况下，<div>否与类关闭或打开。出于这个原因，当你单击div时，只用alert("opne")触发处理程序。

解决方案是：只使用一个处理程序，并在其中放置一个'if'标记。在伪代码中：

if class open
 do someting
else if class close
 do someting

使用jquery .click（）事件的奇怪行为

4 个答案: