检测第二次点击按钮

Question

我想在按钮上更改 CSS。第一次点击，第二次点击。我有这个，但它不起作用。永远不要添加 .clic-two

$(".prev-next-links li.no-clic").click(function() {
    $(this).removeClass('no-clic');
    $(this).addClass('clic-one');
});

$(".prev-next-links li.clic-one").click(function() {
    $(this).removeClass('clic-one');
    $(this).addClass('clic-two');
});

Answer 1

你是 removing/adding class 这意味着 DOM 上的属性是动态的。而对于动态元素，则需要使用事件委托的方式来工作：

$(".prev-next-links").on('click','li.no-clic',function() {
    $(this).removeClass('no-clic');
    $(this).addClass('clic-one');
});
$(".prev-next-links").on('click','li.click-one',function() {
    $(this).removeClass('clic-one');
    $(this).addClass('clic-two');
});

详细了解 event delegation。

但我建议你设置一个标志变量来检查它是否被第二次点击:

var clickedTime = 0;
$(".prev-next-links li").click(function() {
    clickedTime++;
    $(this).toggleClass('click-one',clickedTime % 2 == 0);
});

查找 toggleClass 文档。

Answer 2

问题是因为您在页面加载后动态分配了 .clic-one class，但您在 .click-one 按钮存在之前就已将其加载时将点击事件挂钩。

要解决此问题，您应该使用委托事件处理程序：

$('.prev-next-links').on('click', '.no-clic', function() {
    $(this).toggleClass('no-clic clic-one');
}).on('click', '.clic-one', function() {
    $(this).toggleClass('clic-one clic-two');
});

另请注意单独调用 toggleClass() 而不是单独使用 addClass()/removeClass()。

Answer 3

另一种方法是使用通用的 class 作为选择器。由于 DOM 是动态的，因此您必须使用在用户交互后不会更改的 CSS class。

$(".prev-next-links, .prev-next-links a").click( function() {

   if ($(this).hasClass("no-clic")) {
 
     $(this).removeClass('no-clic');
     $(this).addClass('clic-one');
   } else if ($(this).hasClass("clic-one")) {
     $(this).removeClass('clic-one');
     $(this).addClass('clic-two');
   }



 });

.prev-next-links {
  font-weight: bold;
}
.no-clic {
  background-color: gray;
}
.clic-one {
  background-color: aqua;
}
.clic-two {
  background-color: lime;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li class="prev-next-links no-clic">First
  </li>
  <li class="prev-next-links"><a class="no-clic" href="#">Second</a>
  </li>

</ul>

检测第二次点击按钮

Detect second click on button

jquery

click

addclass

detect