JavaScript: Как пропустить текущий элемент в массиве во время цикла for? (continue?)

Question

EDIT: я не хочу пропустить индекс 1. Я хочу пропустить текущий элемент (нажав). Кроме того, см. Ниже более подробное описание кода. Вы увидите, что у меня есть класс CatListItem и пять экземпляров этого класса в массиве allCatListItems.

Вот какой-то контекст для вопроса: У меня есть список кошек. Когда я нажимаю на имя кота (элемент списка), я хочу, чтобы изображение кота и другая информация были добавлены на страницу (это было опущено). Когда кошку нажимают, я также хочу, чтобы любой другой кот, который отображается, был скрыт (таким образом, на экране есть только одна кошка).

Я пытаюсь выполнить это с помощью цикла for, но, очевидно, если он выполняет итерацию по каждому элементу массива, тогда, когда я нажимаю элемент, кошка, нажатая, также будет скрыта.

Я хочу пропустить текущий элемент в массиве и выполнить только код на других элементах. Используя continue, я знаю, что могу пропустить определенный элемент (пункт 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'), 
]; 

EDIT: Вот скрипку. JSFIDDLE Нажмите на названия, чтобы увидеть функциональность без функции hideCats. Тогда раскомментируйте, где он говорит, чтобы увидеть мою проблему.

Я начинаю думать, что, возможно, цикл for не самый лучший вариант?

Answer 1

В этом случае сравнить event.target (его элемент щелкнул)

EDIT: allCatListItems [я] нужно это свойство .a прилагается к нему в случае заявления (это то, что содержит в себе элемент якорь). Это связано с тем, что прослушиватель событий захватывает якорный тег, поэтому e.target также будет возвращать тег привязки. Оператор if никогда не вернется как истинный, если вы не сравниваете один и тот же тип элемента.

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 к каждому элементу cat.