Переключить элементы на кнопки на кнопке

Question

У меня разные div, у которых все одинаковые классы "textBox".

В то же время всегда должен отображаться только один квадрат. Для большинства ящиков есть кнопка в нижней части моей страницы, которую можно щелкнуть, и триггеры , чтобы сделать поле видимым и скрыть поле, которое уже показано в данный момент.

Edit: Fiddle 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; 
} 

проверяет этот код, если окно уже показано, и если да, он проверяет КАЖДЫЙ ДРУГОЙ BOX, чтобы получить тот, который виден, а затем постепенно исчезать, чтобы потом исчезнуть обозначаемого поле в.

Моя проблема, я нужна эта часть кода для каждые коробка. Я думаю, что должен быть лучший способ добиться этого.

То, что я ищу это своего рода метод Openbox (идентификатор) где я даю идентификатор окна, как paramete и он автоматически определяет все другие коробки с параметром класса и обнаруживает, что уже утрачен в, затем исчезает этот чтобы выцветать ящик с id in.

К сожалению, мои навыки работы с 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>

и использовать код, приведенный ниже. Сначала убедитесь, что элемент видим. Затем при нажатии этого элемента он исчезает и исчезает в следующем элементе. Добавляет класс «getStartedButton» к видимому элементу, который снова запускает событие click.

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