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

Question

EDIT: I don't want to skip index 1. I want to skip the current (clicked on) element. Also, see below for more of the code as requested. You'll see that I have a class CatListItem and five instances of that class in an array allCatListItems .

Here's some context for the question: I have a list of cats. When I click on a cat's name (list item), I want that cat's picture and other info to be appended to the page (got that down). When a cat is clicked, I also want any other cat that is being displayed to be hidden (that way there is only one cat on the screen at a time).

I'm trying to accomplish this with a for loop, but obviously if it iterates over every item in the array, then when I click an item, the cat being clicked will be hidden as well.

I want to skip the current item in the array and only run the code on the other items. Using continue, I know I can skip a specific item (item 1 in the below example). This will run my code on every item in the array except that at index one. But how can I make that continue dynamic? Meaning... how can I hide all of the cats, except the one being currently clicked?

Here's the loop that skips index 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: Here's a fiddle. JSFIDDLE Click the names to see the functionality without the hideCats function. Then uncomment where it says to to see my issue.

I'm starting to think maybe a for loop isn't the best option?

Answer 1

In that case compare the event.target(its the element clicked)

EDIT: allCatListItems[i] needs it's .a property attached to it in the if statement (this is what contains the anchor element). This is because the event listener is grabbing an anchor tag, so e.target will be returning an anchor tag as well. The if statement will never return as true if you aren't comparing the same type of element.

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

Here is a jsfiddle, it doesn't use the same element names, but it should be doing what you want. 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

Its really depend on how you call the function "hideCat". Realizing that each time that function is called, more eventListeners are add to every cat item. Each time a cat is clicked, more than one event fired. Perhaps you should re-structure how to attach eventListeners to each cat item.