показывая и скрывая divs, нажав кнопку

Question

У меня есть четыре divs, первый показывает при загрузке сайта. Я в настоящее время скрываю остальные три при загрузке с помощью CSS (display: none)

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

<div id="one"> 
      <h3>Placeholder</h3> 
      <form> 
        <button id="next1" type="button" class="btn btn-lg btn-default">Next</button> 
      </form>  

</div><!--Closes One--> 

<div id="two"> 
      <h3>Placeholder</h3> 
      <form> 
        <button id="next2" type="button" class="btn btn-lg btn-default">Next</button> 
      </form> 
</div><!--Closes Two--> 

<div id="three"> 
      <h3>Placeholder</h3> 
      <form> 
        <button id="next3" type="button" class="btn btn-lg btn-default">Next</button> 
      </form> 
</div><!--Closes Three--> 

<div id="four"> 
      <h3>Placeholder</h3> 
</div><!--Closes Four--> 

Поэтому им нужно создать JQuery, чтобы это произошло.

Вот код Janky у меня есть, что реально не работает вообще ...

$("#next1").click(function(){ 
    $("#two").show(); 
    $("#one").hide(); 
}); 

$("#next2").click(function(){ 
    $("#three").show(); 
    $("#two").hide(); 
}); 

$("#next3").click(function(){ 
    $("#four").show(); 
    $("#three").hide(); 
}); 

Забыли CSS, мои извинения!

#two, #three, #four { 
    display: none; 
    } 

Я предполагаю, что я не нужно явно сказать, чтобы скрыть все три дивы каждый раз, когда из-за CSS уже скрываются два через четыре, а затем изменяя по одному через Jquery.

спасибо раньше!

Answer 1

Это следует сделать это:

(вы использовали классы вместо идентификаторов для ваших элементов)

$("#next1").click(function(){ 
 
    $("#two").show(); 
 
    $("#one").hide(); 
 
}); 
 

 
$("#next2").click(function(){ 
 
    $("#three").show(); 
 
    $("#two").hide(); 
 
}); 
 

 
$("#next3").click(function(){ 
 
    $("#four").show(); 
 
    $("#three").hide(); 
 
});

#two, #three, #four { 
 
    display: none; 
 
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="one"> 
 
      <h3>Placeholder 1</h3> 
 
      <form> 
 
        <button id="next1" type="button" class="btn btn-lg btn-default">Next</button> 
 
      </form>  
 

 
</div><!--Closes One--> 
 

 
<div id="two"> 
 
      <h3>Placeholder 2</h3> 
 
      <form> 
 
        <button id="next2" type="button" class="btn btn-lg btn-default">Next</button> 
 
      </form> 
 
</div><!--Closes Two--> 
 

 
<div id="three"> 
 
      <h3>Placeholder 3</h3> 
 
      <form> 
 
        <button id="next3" type="button" class="btn btn-lg btn-default">Next</button> 
 
      </form> 
 
</div><!--Closes Three--> 
 

 
<div id="four"> 
 
      <h3>Placeholder 4</h3> 
 
</div><!--Closes Four-->

Answer 2

Так что это просто запрос, который вы ищете после

$(".btn-default").click(function(){ 
$(this).closest('div').hide(); //Gets the closest div associated with your button click 
$(this).closest('div').next('div').show(); //hide the next div 
}); 

Answer 3

попробуйте

$("button.btn-default").click(function(){ 
 
$(this).closest('div').hide(); 
 
$(this).closest('div').next('div').show(); 
 
});

#two, #three, #four { 
 
    display: none; 
 
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="one"> 
 
      <h3>Placeholder 1</h3> 
 
      <form> 
 
        <button id="next1" type="button" class="btn btn-lg btn-default">Next</button> 
 
      </form>  
 

 
</div><!--Closes One--> 
 

 
<div id="two"> 
 
      <h3>Placeholder 2</h3> 
 
      <form> 
 
        <button id="next2" type="button" class="btn btn-lg btn-default">Next</button> 
 
      </form> 
 
</div><!--Closes Two--> 
 

 
<div id="three"> 
 
      <h3>Placeholder 3</h3> 
 
      <form> 
 
        <button id="next3" type="button" class="btn btn-lg btn-default">Next</button> 
 
      </form> 
 
</div><!--Closes Three--> 
 

 
<div id="four"> 
 
      <h3>Placeholder 4</h3> 
 
</div><!--Closes Four-->

Answer 4

Это не обязательно, чтобы дать каждому Див свой собственный класс или ID.

Вы можете дать им все те же классы и использовать фильтр jQuery eq: filter, чтобы выбрать правильный div.

Пример код:

$(".custom button").click(function(){ 
    var nextDiv = $(this).attr('data-id'); // Usually a +1 for the next div, but since eq filter is zero based, it works in this case. 

    $('.custom').hide(); 
    $('.custom:eq(' + nextDiv + ')').show(); 
}); 

Рабочий пример: https://jsfiddle.net/ore5h6tk/

Другого пример, скрывая все, кроме первый с помощью CSS: https://jsfiddle.net/ore5h6tk/1/

Надеется, что это помогает.

Answer 5

На самом деле нет ничего плохого в вашем коде. Просто сделайте четыре divs различий.