JavaScript: 如何在 for 循环中跳过数组中的当前项？（继续？）

Question

编辑：我不想跳过索引 1。我想跳过当前（单击的）元素。另外，请参阅下面的更多代码。您会看到我在数组 allCatListItems.

中有一个 class CatListItem 和 class 的五个实例

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

我正在尝试使用 for 循环来完成此操作，但显然如果它遍历数组中的每个项目，那么当我单击一个项目时，被单击的猫也会被隐藏。

我想跳过数组中的当前项，仅运行其他项的代码。使用 continue，我知道我可以跳过特定项目（下例中的项目 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'),
];

编辑：这是一个 fiddle.JSFIDDLE 单击名称以查看没有 hideCats 函数的功能。然后取消注释以查看我的问题。

我开始觉得也许 for 循环不是最好的选择？

Answer 1

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

编辑：allCatListItems[i] 需要在 if 语句中附加 .a 属性（这是包含锚元素的内容）。这是因为事件侦听器正在抓取锚标记，所以 e.target 也会 returning 锚标记。如果您不比较相同类型的元素，则 if 语句永远不会 return 为真。

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/

Answer 2

$('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;";
  }
});

Answer 3

这实际上取决于您如何调用函数 "hideCat"。意识到每次调用该函数时，都会将更多 eventListeners 添加到每个 cat 项目中。每次单击一只猫时，都会触发多个事件。也许您应该重新构造如何将 eventListeners 附加到每个猫项目。

JavaScript: 如何在 for 循环中跳过数组中的当前项？（继续？）

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

javascript

arrays

loops

for-loop

continue

JavaScript: 如何在 for 循环中跳过数组中的当前项？ （继续？）

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

javascript

arrays

loops

for-loop

continue

JavaScript: 如何在 for 循环中跳过数组中的当前项？（继续？）