JavaScript：如何在for循環中跳過數組中的當前項目？ （繼續？）

Question

編輯：我不想跳過索引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循環不是最好的選擇？

Answer 1

在這種情況下，比較event.target（單擊其元素）

編輯：allCatListItems [I]需要它.a連接到它的if語句屬性（這是包含錨元素）。 這是因為事件偵聽器正在抓取錨標記，所以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項目。