JavaScript:如何在 for 循环期间跳过数组中的当前项？ (继续？)

Question

编辑:我不想跳过索引 1。我想跳过当前(单击的)元素。另外，请参阅下面的更多请求的代码。您将看到我有一个类 CatListItem 以及数组 allCatListItems 中该类的五个实例。

以下是该问题的一些背景:我有一份猫列表。当我单击一只猫的名字(列表项)时，我希望将该猫的图片和其他信息附加到页面上(记下来)。单击一只猫时，我还希望隐藏正在显示的任何其他猫(这样屏幕上一次只有一只猫)。

我正在尝试使用 for 循环来实现此目的，但显然如果它迭代数组中的每个项目，那么当我单击一个项目时，被单击的猫也将被隐藏.

我想跳过数组中的当前项目，只在其他项目上运行代码。使用继续，我知道我可以跳过特定项目(下面示例中的项目 1)。这将在数​​组中除索引一之外的每个项目上运行我的代码。但我怎样才能让这个继续动态化呢？意思是...我怎样才能隐藏除当前单击的那只猫之外的所有猫？

这是跳过索引 1 的循环:

CatListItem.prototype.hideCats = function() {
    allCatListItems.forEach(function(cat) {
        cat.a.addEventListener('click', function() {
            for (var i = 0; i < allCatListItems.length; i++) {
                if (i === 1) {
                    continue;
                }
                allCatListItems[i].img.className = 'hide';
            };
        });
    });
}

var allCatListItems = [
    catListItem1 = new CatListItem('El', 'images/el.jpg', 'el'),
    catListItem2 = new CatListItem('Widdle Baby', 'images/widdle-baby.jpg',     'widdle-baby'),
    catListItem3 = new CatListItem('Mama', 'images/mama.jpg', 'mama'),
    catListItem4 = new CatListItem('Legion', 'images/legion.jpg', 'legion'),
    catListItem5 = new CatListItem('Boy', 'images/boy.jpg', 'boy'),
];

编辑:这是一个 fiddle 。 JSFIDDLE单击名称可查看不带 hideCats 函数的功能。然后取消注释以查看我的问题。

我开始认为 for 循环可能不是最好的选择？

Answer 1

在这种情况下，比较 event.target(其单击的元素)

编辑:allCatListItems[i] 需要在 if 语句中附加其 .a 属性(这是包含 anchor 元素的内容)。这是因为事件监听器正在获取 anchor 标记，因此 e.target 也将返回 anchor 标记。如果您不比较相同类型的元素，则 if 语句将永远不会返回 true。

cat.a.addEventListener('click', function(e) {
    for (var i = 0; i < allCatListItems.length; i++) {
       if (allCatListItems[i].a === e.target) {
           continue;
       }
       allCatListItems[i].img.className += ' hide';
    }
});

这是一个jsfiddle，它不使用相同的元素名称，但它应该做你想做的事情。 https://jsfiddle.net/5qb4rwzc/