Question

所以我有一些代码，其中一个类（elink）在点击时更改为另一个类（播放），然后当.playing被点击时它应该再次更改类到.pause，但我的问题是当我点击时。 elink它同时添加.playing和.pause。

因此，当您单击.playing时，我尝试使用警报，但是当您单击.elink时会触发警报。我很困惑为什么会发生这种情况。以下是我使用

的jquery

player();
function player() {
  $(".elink").click(function(e) {
    $(".playing").addClass("elink").removeClass("playing");
    $(this).removeClass("elink").addClass("playing");
  });
}

$('body').on("click", ".playing", function(){
  $(this).addClass("paused")
});

Answer 1

你想这样吗？

        player();
        function player() {
          jQuery(".elink").click(function(e) {    
            jQuery(".playing").addClass("elink").removeClass("playing");
           jQuery(this).removeClass("elink").addClass("playing");
           return false;
          });
        }

        jQuery('body').on("click", ".playing", function(){
          jQuery(this).addClass("paused")
        });

Answer 2

首先让我解释下面两种类型的事件绑定之间的区别。

第一个 - jQuery(".elink").click(function(e) {

这将找到具有类.elink的所有元素，并将click事件处理函数附加到它。它类似于紧密耦合的事件（或者记住事件被注入到具有该类的每个元素中），这就是它一旦被附加，它将一直保留到元素的生命周期或直到event被手动删除。所以考虑到这一点，现在无论发生什么事情都会像追加孩子一样，改变它的类在HTML等中改变它的位置对注入它的event没有影响。除非事件如上所述被删除。

第二个 - $('body').on("click", ".playing", function(){

此处click事件附加到文档级别，但有一点不同。我们提供了额外的参数说明以下事件处理函数应该在哪些元素上工作。因此，当有click事件时，jquery代码将检查click是否在指定元素或其子元素上，如果是，则执行其他函数。由于它附加到文档中而不是特定元素，因此事件将始终适用于在单击时具有指定类的任何元素。这种事件绑定称为event delegation，对于处理动态元素上的事件非常有用。

现在有了这些知识，让我们看看你的代码。

 jQuery(".elink").click(function(e) {    
   jQuery(".playing").addClass("elink").removeClass("playing");
   jQuery(this).removeClass("elink").addClass("playing");
   return false;
 });

您强烈地将事件绑定到具有类elink的元素，其中您将其类更改为其他类，但这并不会阻止它在下一次单击时再次运行此函数。根据每个click的当前逻辑，无论如何，您都会添加类playing。

所以我有一些代码，其中一个类（elink）在点击时更改为另一个类（播放），然后当点击.playing时它应该再次更改类.pause，

要实现这一目标，您需要使用以下逻辑。

player();
function player() {
  $(".elink").click(function(e) { // this is one time binding to element, so chnaging class names will have no effect on the execution of the event on further clicks
    var currentClass = $(this).attr('class');

    switch(currentClass){
     case 'elink': $(this).removeClass("elink").addClass("playing"); break;
     case 'playing': $(this).removeClass("playing").addClass("pause");break
     default?: break;
    }    
  });
}

注意我已经删除了event delegation脚本，因为我们正在处理相同的元素，即使我们更改了类，事件总是会触发，这足以处理任务。

希望这有帮助。

.on点击动态类之前发生的函数jquery

2 个答案: