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

JavaScript: How to skip over current item in array during a for loop? (continue?)

本文关键字：数组 项目 继续 for 循环 JavaScript      更新时间：2023-09-26

编辑：我不想跳过索引1。我想跳过当前（单击）元素。此外，请参阅下面的更多代码。您将看到我有一个类CatListItem，并且在数组allCatListItems中具有该类的五个实例。

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

我试图通过for循环来实现这一点，但显然，如果它遍历数组中的每个项目，那么当我单击一个项目时，被单击的猫也会被隐藏。

我想跳过数组中的当前项目，只在其他项目上运行代码。使用继续，我知道我可以跳过特定项目（以下示例中的项目 1）。这将在数组中的每个项目上运行我的代码，除了索引 1 处的项目。但是，我怎样才能使这种continue动态化呢？意义。。。如何隐藏所有猫，除了当前正在点击的猫？

下面是跳过索引 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'),
];

编辑：这是一个小提琴。JSFIDDLE 单击名称以查看没有 hideCats 函数的功能。然后取消评论它说的地方以查看我的问题。

我开始认为也许 for 循环不是最佳选择？

在这种情况下，比较 event.target（它是点击的元素）

编辑：allCatListItems[i]需要它在if语句中附加.a属性（这是包含锚元素的内容）。这是因为事件侦听器正在获取锚标记，因此e.target也将返回锚标记。如果不比较相同类型的元素，则 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/

$('li').on('click', function() {
    var index = $(this).index();
  var items = document.getElementsByTagName('li');
  for(var i = 0; i < items.length; i++) {
    if(i === index) continue;
    items[i].style = "display:none;";
  }
});

这实际上取决于您如何调用函数"hideCat"。 意识到每次调用该函数时，都会向每个猫项添加更多的事件侦听器。 每次点击猫时，都会触发多个事件。 也许你应该重新构建如何将事件侦听器附加到每个猫项。

相关文章：