0

我第一次在这里问一些事情，我希望你们能像以往一样乐于助人。

我正在用Javascript（也使用一些jQuery）制作一个应该这样做的脚本：假设我们有一个包含用户帖子的页面。如果有人在其中一个帖子上单击用户名，脚本将突出显示同一用户的所有其他帖子。如果一个用户的帖子已经被高亮了，我们在另一个帖子中点击另一个用户的名字，那么之前高亮的帖子必须恢复正常状态，现在必须突出显示另一个用户的帖子。

我写的剧本是这样的。 

$(function (){
    $(".showall").click(function() {
        var identifier = this.innerHTML;

        var already = document.getElementsByClassName("highlight");
        var l = already.length;

        if (l) {            
            for (i=0; i<l; i++) {
                var to_hide = already[i].id;
                $("#"+to_hide).toggleClass("highlight");
            }
        }

        var sum = document.getElementsByClassName("uid_"+identifier)
        var l = sum.length;
        for (i=0; i<l; i++) {
            var to_show = sum[i].parentNode.parentNode.parentNode.id;
            $("#"+to_show).toggleClass("highlight");
        }

    });

});

让我解释一下它的作用。

当在指定元素之一上触发 click 事件时，它会存储用户标识符，然后通过检查“highlight”类的文档来检查是否已经有突出显示的评论。

如果有突出显示的评论，则应该从每个评论中删除突出显示类，然后根据用户标识符相应地突出显示任何其他帖子。

脚本的问题出现在 if(l) {} 条件内的循环中，这里

if (l) {            
    for (i=0; i<l; i++) {
        var to_hide = already[i].id;            
        $("#"+to_hide).toggleClass("highlight");
    }
}

删除突出显示类时，它会跳过所有其他帖子，并且只循环一半长度。

例如，假设我突出显示了用户的帖子。该用户有 14 个帖子，因此，所有 14 个帖子都被突出显示。现在，如果我想突出显示另一个用户的帖子，然后单击他的名字，脚本将删除以前帖子中的突出显示，如下所示：

从 1 号
帖子中删除 亮点
从 3 号帖子中删除 亮点 从 5 号帖子中 删除亮点




当我再次单击另一个用户名时，它将
从帖子 No2
中删除突出显示 从帖子 No6 中
删除突出显示 从帖子 No10 中
删除突出显示 从帖子 No14 中删除突出显示

等等

我不明白为什么循环会这样。我已经删除了带有 .toggleClass 的行，并使它对数组的每个元素发出警报，并且它对整个长度而不是一半长度这样做，而不会跳过元素。

就像当我使用 .toggleClass 时 i 增加了 2，而我，看在我的份上，不明白为什么。我也尝试过使用 .classList.toggle 来实现，而不使用 jQuery，这又是同样的事情。

任何帮助都感激不尽。向大家问好。

编辑：忘记添加，Chrome 的控制台给了我这个错误，对于脚本正在跳过的帖子：未捕获的类型错误：无法读取未定义的属性 'id'。我明白它的意思，就像它没有找到一个有效的对象来读取 id 属性，但我不明白为什么会这样。

4

1 回答 1

1

您的代码似乎过于复杂。

像这样的东西适用于您的用例吗？

$('.user-name').click(function (e) {
    e.preventDefault();
    var user_id = $(this).parent().data('userid');

    if (!$(this).parent().hasClass('selected')) {    
        $('.post.selected').removeClass('selected');
        $('.post[data-userId='+ user_id +']').addClass('selected');
    } else {
        $('.post.selected').removeClass('selected');
    }
});
于 2012-09-15T04:40:49.820 回答