按鈕上的切換元素視圖點擊

Question

我有不同的divs，它們都具有相同的類「textBox」。

同時應該總是顯示一個框。對於大多數盒子，我的頁面底部有一個按鈕，可點擊並觸發 以使盒子可見並隱藏此時已顯示的盒子。

編輯：小提琴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 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; 
} 

個

此代碼檢查是否已經所示的對話框，如果是它檢查每個其他箱拿到其中一個是可見的，然後淡出出來事後褪色下文稱框中英寸

我的問題是，我每框需要這部分的代碼。我認爲應該有更好的方法來實現這一點。

我正在尋找一種是方法的Openbox（ID），我給框，paramete的id，它會自動檢測與類參數的所有其它框，然後檢測其已褪，然後淡出這個出現褪色框ID英寸

可悲的是我的JavaScript技能不是那麼好，所以我尋求一些建議或例子如何實現這一點。

非常感謝您爲我提供的每一個輸入。

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>

---

如果您不希望當前框切換，比的不是.fadeToggle()使用.fadeIn()。

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

我做了它使用類。該HTML會像：

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

，並使用下面的代碼。首先保持任何元素可見。然後單擊該元素將其淡出並淡入下一個元素，並將類「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(); 
 
    
 
});