ボタンの要素表示を切り替えるには

Question

私はすべて同じクラス "textBox"を持つ異なるdivを持っています。

同時に、常に1つのボックスが表示されます。ほとんどのボックスでは、ページの下にボタンをクリックしてクリックすると、 が表示され、この時点で既に表示されているボックスが非表示になります。

は編集：フィドルhttps://jsfiddle.net/8uvsq7ta/

このために私が持っているこれは、JS-コード：

$("#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(); 
      }); 
     } 
    }); 

のdivボックスは次のようになります。

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

個の

このコードチェックボックスが既に示されている場合と、そうならば、それが表示されているものを取得し、その後にrefferedボックスをフェードにそれをフェードアウトする他のすべてのBOXをチェックします。

私の問題は、私は、ありますのコードのこの部分がすべてボックスに必要です。私はこれを達成するためのよりよい方法があるべきだと思います。

私は何を探していますが種類私はparameteとしてボックスのIDを与えると、それは自動的にクラス・パラメータと他のすべてのボックスを検出し、すでに色あせているかを検出このOpenBox（ID）は、その後、これをフェード方法であり、 id： in。

悲しいことに私のjavascriptのスキルはそれほど良くないので、私はいくつかのアドバイスや例を見つけようとしています。

私が与えることができるすべての入力をありがとうございます。

---

あなたは現在のボックスの代わりに.fadeToggle()使用.fadeIn()よりも、トグルしたくない場合は

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>

。

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

Answer 2

そのコンテンツにリンクするには、ボタンにdata-*属性を追加すると：

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

Javascriptを非常に簡単になる：

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

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

更新日：https://jsfiddle.net/8uvsq7ta/2/

Answer 3

私はクラスを使用しています。

<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>

、以下のコードを使用します。HTMLは次のようになります。すべての要素を最初に表示しておきます。その要素をクリックすると、その要素が消えて次の要素が消え、可視要素にクラス「gettingStartedButton」が追加され、再度クリックイベントが実行されます。

$(".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(); 
 
    
 
});