在两个div之间点击时交换类别

我在下面有下面的代码。当我运行应用程序，然后点击“栏”时，显示消息The not 'current' div has been clicked。然后，如果我点击“foo”，则不显示消息。我预计会显示这条消息，因为我已经在两个divs之间交换了类current。在两个div之间点击时交换类别

<div class="current">foo</div> 
<div>bar</div> 

$('document').ready(function(){ 
    $('div').not('.current').on('click', function(){ 
     alert("The not 'current' div has been clicked.") 
     var aux = $(this); 
     $('div').removeClass('current'); 
     aux.addClass('current'); 
    }); 
});

来源

2013-05-10 ziiweb

正确加载文档后，您为所有没有“current”类的元素分配了一个click监听器。因此，第一个具有该类的div不在集合中，并且永远不会拥有该收听者。 – 2013-05-10 11:38:43

@PetrČihula好的，谢谢，我不知道我是在“分配”，有没有办法做到这一点，而没有“assinging”？ – ziiweb 2013-05-10 12:24:34

如果通过“不分配”您的意思是“每次更改类时不重复分配”，那么对每个“div：not（.current）”使用'.live（）'（jQuery <1.7） .on（）'（> = 1.7）用相同的子选择器应用于文档对象。请参阅http://jsfiddle.net/MMjx4/ – 2013-05-13 13:11:38

在DOM准备好了，您已经分配点击事件仅适用于不具有类current的div。因此，代码不起作用。您需要点击事件分配给所有div的，检查里面的类，如：

$('div').on('click', function (e) { 
    if (e.target.className === 'current') return; 
    console.log("The not 'current' div has been clicked.") 
    var $aux = $(this); 
    $('div').removeClass('current'); 
    $aux.addClass('current'); 
});

来源

2013-05-10 11:44:24

好的，谢谢，有什么办法可以做到我想要的而不会触发事件处理程序？ – ziiweb 2013-05-10 12:50:27

我不认为这是不可能的，没有任何事件处理程序。 – 2013-05-10 13:09:03

您只将click事件添加到“not current”元素，并且当您切换类时，其中一个元素仍然没有单击事件。相反，你可以这样做：

$('document').ready(function(){ 
    $('div').on('click', function(){ 
     if ($(this).hasClass("current")){ 
      return; 
     } 

     alert("The not 'current' div has been clicked.") 
     var aux = $(this); 
     $('div').removeClass('current'); 
     aux.addClass('current'); 
    }); 
});

来源

2013-05-10 11:37:39 Strille

使用此代码：

$('document').ready(function(){ 
    $('div').on('click', function(){ 
     if($(this).hasClass('current')) return; 

     alert("The not 'current' div has been clicked.") 
     var aux = $(this); 
     $('div').removeClass('current'); 
     aux.addClass('current'); 
    }); 
});

检查回调内部类）

的jsfiddle这里：http://jsfiddle.net/5hFv4/

来源

2013-05-10 11:37:57

我想你想要的是一个div点击它不具有.current类将获得click事件并交换.current类，因为您正在使用jQuery操作dom并交换类，它没有得到应用的新类，它需要在页面准备好时加载的元素，因此您可以将事件委托给document以及你会得到你想要的东西：

$(document).on('click', 'div:not(.current)', function() { 
    alert("The not 'current' div has been clicked."); 
    var aux = $(this); 
    $('div').removeClass('current'); 
    aux.addClass('current'); 
});

Tryout this fiddle

来源

2013-05-10 11:55:32 Jai

好的，谢谢，有什么办法可以做到我想要的而不会触发事件处理程序？ – ziiweb 2013-05-10 13:02:09

在两个div之间点击时交换类别

回答

相关问题