1

也许我这样做不正确/效率低下，但这对我不起作用：

$(document).ready(function(){

    $('li.taglink').click(function(){
        alert('clicked tag');
        $userClicked = $(this).html();
        $('#holder').children('div').each(function () { 
            $('li.taglinkcurrent').removeClass('taglinkcurrent').addClass('taglink');                                       
            $x = $(this).attr("tags");
            ele = $x.split(',');
            for (var i = 0; i < ele.length; i++) 
            {
            if ($userClicked == ele[i]) {$(this).show(495); break;} 
                                    else {$(this).hide(495);}   
            }
        });
        $(this).removeClass('taglink').addClass('taglinkcurrent');
    });

    $('li.taglinkcurrent').click(function(){
        alert('clicked current');
        $('li.taglinkcurrent').removeClass('taglinkcurrent').addClass('taglink');                               
        $('li.taglink').show(495);
    });

});

该页面包含具有“标签”属性的 div，其中包含多个标签。我还有一个无序列表，每个 li 元素都包含单独的标签。当用户单击其中一个 li 元素时，它会显示所有具有该标签的 div，并隐藏其他所有内容。如果用户单击相同的 li 元素，它会再次显示所有内容。我添加了警报以测试发生了什么，每次单击链接时都会弹出“单击的链接”，即使 li 将其类切换为 .taglinkcurrent。关于我做错了什么的任何想法？

4

2 回答 2

2

当您第一次运行代码时，您将绑定到该click()事件，因此"taglink"该类是唯一起作用的类。

要根据对 dom 的更改来更改函数，请改用以下on()方法：

http://api.jquery.com/on/

$(document).on("click", "li.taglink", function() { 
  // ... 
});

但是，该方法有很多警告on()- 有关更多详细信息，请参阅上面的文档。

编辑：从 v1.7 开始，将“live”更改为“on”，这是首选方法。

于 2012-05-20T20:55:10.720 回答
1

我想该事件归因于加载时的每个 li，并且后续的类更改不会解除该事件的绑定。但是我认为您可以通过这种方式轻松解决此问题：

$('li').click(function() {
    if ( $(this).hasClass("taglink") ) {
        alert("clicked tag");
        ...
    } else if ( $(this).hasClass("taglinkcurrent") ) {
        alert('clicked current');
        ...
    }
});
于 2012-05-20T20:59:25.577 回答