Question

编辑：我不想跳过索引1.我想跳过当前（点击）元素。另外，请参阅下面的更多代码请求。您会看到我在类CatListItem中有一个类allCatListItems和该类的五个实例。

这是问题的一些背景：我有一个猫的列表。当我点击猫的名字（列表项）时，我希望将猫的图片和其他信息附加到页面上（得到它）。当点击一只猫时，我也希望隐藏任何其他正在显示的猫（这样一旦屏幕上只有一只猫）。

我正在尝试使用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'),
];

编辑：这是一个小提琴。JSFIDDLE单击名称以查看没有hideCats功能的功能。然后取消注释，以便查看我的问题。

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

Answer 1

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

编辑：allCatListItems [i]需要在if语句中附加到它的.a属性（这是包含anchor元素的内容）。这是因为事件监听器正在抓取锚标记，因此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/

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”。意识到每次调用该函数时，都会向每个cat项添加更多的eventListeners。每次点击一只猫时，都会触发多个事件。也许您应该重新构造如何将eventListeners附加到每个cat项目。

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

3 个答案:

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

3 个答案:

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