Question

我想制作简单的jQuery脚本。我有两个div。首先被称为＆＃39;但是＆＃39;第二个被称为＆＃39; tun＆＃39;我想要做的是当你点击但是 - ＆gt; tun隐藏，但有新的类活跃。当您单击活动的tun显示时，将删除类active。所以它有点像切换，但我真的不想使用切换因为我需要在第一次和第二次点击时采取不同的行动。

这是我的代码：

$('.but').click(function(){
    $(this).addClass('active');
    $('.tun').hide('slow');
});
$('.active').click(function(){
    $('.tun').show('slow');
    $(this).removeClass('active');
});]

为什么它不起作用？

http://jsfiddle.net/wcwny064/

Answer 1

您将事件绑定到特定元素，稍后没有关于选择器的即时处理。你可以委派活动。那说，您可以使用以下逻辑：

$(document).on('click', '.active, .but', function(){
    $('.visible').stop().toggle('slow'); // stop() to handle multiple clicks
    $(this).toggleClass('active but');
});

-jsFiddle-

Answer 2

而不是使用.click()函数直接附加到document的点击事件，使用这样的选择器;

$(document).on('click', '.but', function(){
    $(this).addClass('active');
    $('.visible').hide('slow');
}).on('click', '.active', function(){
    $('.visible').show('slow');
    $(this).removeClass('active');
});

这样您就可以将事件委托给文档。在发生点击事件的t时刻如果文档包含与您的选择器匹配的元素，则您的函数将会运行。

在您的代码中，当您使用.active选择器并绑定click事件时，没有active类的元素。因此，您无法绑定第二个click事件。

Answer 3

或者你可以这样做

$('.but').click(function(){
    if($(this).hasClass("active"))
    {   
      $('.visible').show('slow');
      $(this).removeClass('active');        
    }
    else
    {
      $(this).addClass('active');
      $('.visible').hide('slow');
    }
});

这个简单的点击功能我做错了什么？

3 个答案:

-jsFiddle-