Toggle Elemente Ansicht auf Schaltflächen klicken

Question

Ich habe verschiedene divs, die alle die gleiche Klasse "textBox" haben.

Gleichzeitig sollte immer nur eine Box angezeigt werden. Für die meisten Boxen gibt es eine Schaltfläche am unteren Rand meiner Seite, die angeklickt werden kann und auslöst, um die Box sichtbar zu machen und die Box, die in diesem Moment bereits angezeigt wird, zu verbergen.

Edit: Fiddle https://jsfiddle.net/8uvsq7ta/

Dazu habe ich diese JS-Code:

$("#gettingStartedButton").click(function() { 

     if (! $("#gettingStarted").is(":visible")) { 
      if ($("#extension").is(":visible")) { 
       $("#extension").fadeOut(function() { 
        $("#gettingStarted").fadeIn(); 
       }); 
      } 
      else if ($("#executingBox").is(":visible")) { 
       $("#executingBox").fadeOut(function() { 
        $("#gettingStarted").fadeIn(); 
       }); 
      } 
      else if ($("#feedback").is(":visible")) { 
       $("#feedback").fadeOut(function() { 
        $("#gettingStarted").fadeIn(); 
       }); 
      } 
      else if ($("#impressum").is(":visible")) { 
       $("#impressum").fadeOut(function() { 
        $("#gettingStarted").fadeIn(); 
       }); 
      } 
      else if ($("#registration").is(":visible")) { 
       $("#registration").fadeOut(function() { 
        $("#gettingStarted").fadeIn(); 
       }); 
      } 
     } 
     else { 
      $("#gettingStarted").fadeOut(function() { 
       $("#executingBox").fadeIn(); 
      }); 
     } 
    }); 

Die div-Boxen wie folgt aussehen:

<div id="gettingStarted" class="textBox"> 
test blabla 
</div> 

<div id="feedback" class="textBox"> 
test blabla 
</div> 

<div id="registration" class="textBox"> 
test blabla 
</div> 

<div id="impressum" class="textBox"> 
test blabla 
</div> 

CSS:

.textBox { 
    diplay: none; 
} 

Diese Kontrollen-Code, wenn die Box bereits und wenn ja gezeigt, überprüft er JEDER ZWEITE BOX die eins zu bekommen, die sichtbar ist und es dann ausgeblendet, um danach die reffered Box verblassen in.

Mein Problem ist, ich brauche diesen Teil des Codes für jede Box. Ich denke, es sollte einen besseren Weg geben, dies zu erreichen.

Was ich suche ist eine Art ein Verfahren OPENBOX (id), wo ich die ID der Box als paramete geben und es erkennt automatisch alle anderen Felder mit dem Klassenparameter und erkennt die bereits eingeblendet wird, dann ist diese verblasst out zum verblassen die Box mit der id in.

Leider sind meine Javascript-Fähigkeiten nicht so gut, so dass ich versuche, einige Ratschläge oder Beispiele zu finden, wie dies zu erreichen ist.

Vielen Dank für jede Eingabe, die Sie mir geben können.

Answer 1

var $textBox = $(".textBox");    // get 'em all! 
 
$textBox.eq(0).fadeIn();     // FadeIn first one 
 

 
$("[data-showid]").on("click", function(){ // Buttons click (Use data-* attribute!) 
 
    var $box = $("#"+ this.dataset.showid); // Get the target box ID element 
 
    $textBox.not($box).hide();    // Hide all bot targeted one 
 
    $box.stop().fadeToggle();     // FadeToggle target box 
 
});

.textBox{display:none;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div id="gettingStarted" class="textBox">getting started blabla</div> 
 
<div id="feedback" class="textBox">feedback blabla</div> 
 
<div id="impressum" class="textBox">impressum blabla</div> 
 

 
<button data-showid="gettingStarted">GS</button> 
 
<button data-showid="feedback">FB</button> 
 
<button data-showid="impressum">Imp</button>

---

Wenn Sie nicht möchten, das aktuelle Feld zu wechseln, als statt .fadeToggle() Verwendung .fadeIn().

http://api.jquery.com/fadetoggle/
https://api.jquery.com/data/
https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/dataset

Answer 2

Mit dem Zusatz eines data-* Attribut auf Schaltfläche, um seinen Inhalt zu verknüpfen:

<button id="gettingStartedButton" data-link="gettingStarted">GS</button> 
<button id="feedbackButton" data-link="feedback">FB</button> 
<button id="impressumButton" data-link="impressum">Imp</button> 

Die Javascript wird sehr einfach:

$("#gettingStarted").fadeIn(); 

$('button').click(function(){ 
    var link = $(this).data('link'); 
    $('.textBox:visible').fadeOut(function(){ 
        $('#' + link).fadeIn() 
       }); 
}) 

Aktualisiert Geige: https://jsfiddle.net/8uvsq7ta/2/

Answer 3

Ich habe es mit Klasse.Der HTML-Code wäre wie:

<div class="textBox gettingStartedButton" style="display: none;"> 1 test blabla </div> 
 
<div style="display: none;" id="feedback" class="textBox .gettingStartedButton gettingStartedButton"> 2 test blabla </div> 
 
<div id="registration" class="textBox gettingStartedButton" style="display: block;">3 test blabla </div> 
 
<div id="impressum" class="textBox"> 4 test blabla </div>

Und den Code unten verwenden. Halte jedes Element auf dem ersten Blick sichtbar. Beim Klicken auf dieses Element wird es ausgeblendet und das nächste Element wird eingeblendet. Es fügt dem sichtbaren Element die Klasse "gettingStartedButton" hinzu, um das click-Ereignis erneut auszuführen.

$(".gettingStartedButton").on('click', function() { 
 
    
 
    var visible_element = $('.textBox:visible'); 
 
    visible_element.next().fadeIn(); 
 
    visible_element.next().removeClass('gettingStartedButton'); 
 
    visible_element.next().addClass('gettingStartedButton'); 
 
    visible_element.fadeOut(); 
 
    
 
});