JavaScript: Wie überspringe das aktuelle Element im Array während einer for-Schleife? (weiter?)

Question

EDIT: Ich möchte den Index 1 nicht überspringen. Ich möchte das aktuelle (angeklickte) Element überspringen. Siehe auch unten für mehr Code wie angefordert. Sie werden sehen, dass ich eine Klasse CatListItem und fünf Instanzen dieser Klasse in einem Array allCatListItems habe.

Hier ist ein Zusammenhang für die Frage: Ich habe eine Liste von Katzen. Wenn ich auf den Namen einer Katze (Listenelement) klicke, möchte ich, dass das Bild und die anderen Informationen der Katze an die Seite angehängt werden. Wenn eine Katze angeklickt wird, möchte ich auch, dass eine andere Katze, die angezeigt wird, ausgeblendet wird (auf diese Weise gibt es immer nur eine Katze auf dem Bildschirm).

Ich versuche, dies mit einer for Schleife zu erreichen, aber offensichtlich, wenn es über jedes Element im Array iteriert, wenn ich dann auf ein Element klicke, wird die angeklickte Katze ebenfalls ausgeblendet.

Ich möchte das aktuelle Element im Array überspringen und nur den Code für die anderen Elemente ausführen. Wenn ich fortfahre, weiß ich, dass ich einen bestimmten Gegenstand überspringen kann (Artikel 1 im folgenden Beispiel). Dadurch wird mein Code für jedes Element im Array ausgeführt, mit Ausnahme von Index eins. Aber wie kann ich das continue dynamisch machen? Bedeutung ... wie kann ich alle Katzen verstecken, außer die, die gerade angeklickt wird?

Hier ist die Schleife, die Index 1 überspringt:

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: Hier ist eine Geige. JSFIDDLE Klicken Sie auf die Namen, um die Funktionalität ohne die Funktion hideCats anzuzeigen. Dann kommentieren Sie, wo es heißt, um mein Problem zu sehen.

Ich fange an zu denken, dass vielleicht eine For-Schleife nicht die beste Option ist?

Answer 1

In diesem Fall vergleichen die event.target (das das Element angeklickt)

EDIT: allCatListItems [i] braucht es .a Eigenschaft mit ihm verbunden in dem if-Anweisung (das ist, was das Ankerelement enthält). Dies liegt daran, dass der Ereignis-Listener ein Anchor-Tag erfasst, sodass e.target ebenfalls ein Anchor-Tag zurückgibt. Die if-Anweisung wird niemals als wahr zurückgegeben, wenn Sie nicht den gleichen Elementtyp vergleichen.

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

ist hier ein jsfiddle, ist es nicht die gleichen Elementnamen verwenden, aber es sollten Sie tun, was. 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

Es hängt wirklich davon ab, wie Sie die Funktion "hideCat" nennen. Es wird erkannt, dass jedes Mal, wenn diese Funktion aufgerufen wird, mehr Ereignislistener zu jedem Katzenelement hinzugefügt werden. Jedes Mal, wenn auf eine Katze geklickt wird, wurden mehr als ein Ereignis ausgelöst. Vielleicht sollten Sie neu strukturieren, wie EventListener an jedes Element angehängt werden.