2016-12-26 5 views
-1

Ich versuche zu machen, wenn ein Knopf gedrückt wird, dass immer nur ein DIV sichtbar ist. Wenn sie auf eine andere Schaltfläche klicken, wird das entsprechende div angezeigt und das letzte ausgeblendet.Ein DIV immer sichtbar machen

Ich habe eine versuchte Schleife:

function display(x) { 

    for (i=0; i<content.length; i++){ 
     content[i].style.display = 'none'; 
    } 

    if(x = content[i]){ 
     x.style.display = 'inline'; 
    } 
} 

Das ist nicht nichts getan.

Ich habe versucht, die if-Anweisung innerhalb der Schleife verschachteln, aber es verursacht, dass alle sichtbar sind.

Ich habe die jsfiddle unten verbunden.

Bitte keine jQuery Antworten, wie ich versuche zuerst reines Javascript zu lernen.

Vielen Dank im Voraus.
https://jsfiddle.net/ethacker/rp59g9cf/

+0

Das ist, weil 'i' wird = zu' content.length', in Ihrem 'for()' 'i' wird +1 jedes Mal, wenn es so am Ende für Ihre Schleife ausgeführt wird Es zielt auf das letzte Array-Element von 'content' ab. Versuchen Sie, Ihre if-Bedingung in Ihre for-Schleife zu setzen. – NewToJS

+0

Auch nicht sicher, warum Sie jede Schaltfläche [] so anvisieren, wie Sie sind. Warum führen Sie sie nicht in einer 'for()' - Schleife aus und verwenden 'i', um den Ereignisanruf einzustellen? Beispiel 'buttons [i] .addEventListener (" click ", function() {display (content [i])};' da der Index der Schaltfläche dem Index von 'content []' entspricht, den Sie übergeben möchten .. – NewToJS

Antwort

1

Sie sind nicht die if innerhalb der Schleife setzen. Daher wird nur der letzte Wert von i überprüft. Außerdem sollte der Wert gleich == sein. Sie sollten es tun, wie folgt:

function display(x) { 

    for (i=0; i<content.length; i++){ 
     if(x == content[i]){ 
      x.style.display = 'inline'; 
     } else { 
      content[i].style.display = 'none'; 
     } 
    } 

} 
+0

Ein Teil des Grundes, warum es nicht funktioniert, ist, dass er 'if (x = content [i])' hat, was hier nicht funktioniert. Sollte 'if (x === content [i])' sein. EDIT: Just sah Sie bereits das! –

+0

@SHBelsky ja, ich korrigierte, dass –

+0

ich gerade bemerkt habe, können Sie meine vorgeschlagene Änderung ignorieren :) –

0

sehen diese fiddle example Code I Code

var currDisplayElm; 
//function 
function display(content) { 

    if(currDisplayElm) 
     currDisplayElm.style.display = 'none'; 

    currDisplayElm = content; 
    content.style.display = 'inline'; 
} 
0

Wie ich verstehe leicht modifiziert. Ithink Wenn Sie die Funktion beim Klicken auf die Schaltfläche aufrufen, setzen Sie die div-ID der Reihe nach und Sie sollten das div-Feld übergeben, das Sie anzeigen möchten. Und div Name muss gleich sein, dann können Sie andere div verstecken. Ich hoffe, Sie verstehen ..

Verwandte Themen