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

您正在删除/添加类，这意味着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类，但是在加载之前您将点击事件挂钩到.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

Another way of doing it is by using the common class as the selector. Since the DOM is dynamic you would have to use the CSS class that is not changing after a user interaction.

$(".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>

检测第二次单击按钮

3 个答案: