Javascript通過點擊同一個按鈕來一個接一個地切換多個div

Question

所以我在表單中有這個代碼，我想通過反覆點擊同一個按鈕來逐個切換每個div。但是當我點擊按鈕時，一切都顯示出來了，是否有方法通過單擊同一個按鈕來逐一切換它？

<div id="msg2" class="hidemsg"> 
    <label for="commentcont" class="control-label">Message 2:</label> 
    <input type="text" class="form-control" name="comment2" placeholder="New message." /> 
</div> 
<div id="msg2" class="hidemsg"> 
    <label for="commentcont" class="control-label">Message 3:</label> 
    <input type="text" class="form-control" name="comment3" placeholder="New message." /> 
</div> 
<div id="msg2" class="hidemsg"> 
    <label for="commentcont" class="control-label">Message 4:</label> 
    <input type="text" class="form-control" name="comment4" placeholder="New message." /> 
</div> 
<div id="msg2" class="hidemsg"> 
    <label for="commentcont" class="control-label">Message 5:</label> 
    <input type="text" class="form-control" name="comment5" placeholder="New message." /> 
</div> 

下面是切換它的按鈕;

<a href="#" type="button" class="btn btn-default" onclick="toggler(\'msg2\');">New Message</a> 

用於切換它的javascript代碼;

function toggler(divId) { 
    $('#' + divId).toggle(); 
} 

我只是js的初學者，我想通過單擊同一個按鈕來逐個切換輸入。所以它就像當我點擊新消息：Message 2 will appear然後當我再次點擊它，Message 3 will appear等等。

Answer 1

我不知道，但嘗試以下提到以下code

使用中提到的HTML代碼：下面

<a href="#" type="button" class="btn btn-default" onclick="toggler();">New Message</a> 

提到使用JavaScript代碼：

var x=1; 
function toggler() { 
    var hidemsgLength=$('.hidemsg').length; 
    if(x<hidemsgLength){ 
     $('.hidemsg').eq(x).show(); 
     x++; 
    } 
} 

現在來的CSS部分：

.hidemsg{display:none;} 
.hidemsg:first-child{display:block;} 

Answer 2

問題是你所有的div都有相同的id。如果您更改ID的，使它們獨特，具有和提高尾隨值（MSG1，MSG2，...），該功能可以改變這樣的：

var counter = 1; 
    function toggler(divId) { 
     $('#' + divId + counter).toggle(); 
    counter++; 
    } 

Answer 3

首先，它可能會更好使用div上的唯一ID。

對於多個元素，更喜歡class。

特蘭的解決方案是：

• 上的負載，所有div都在第一次點擊，第一個div是隱藏
• 在第二次點擊顯示
• ，第二個div隱藏
• ...

這意味着你可以使用$(".my_class:visible").first().toggle();

Answer 4

首先，一個ID只能使用一次。

如果我正確理解你的問題，你可以做什麼，首先隱藏所有消息並顯示第一個消息。

然後，當用戶點擊按鈕，顯示第二個，然後第三個等。 我不喜歡內聯點擊處理程序，所以我在JS中添加了一個eventListener。

// reference to button 
var btn = document.querySelector('.js-button'); 

// which message to display 
var index = 1; 

// total number of messages 
var numMessages = $('.hidemsg').length; 

// hide 'm all 
$('.hidemsg').hide(); 

// and toggle the first 
toggler(); 

// when user clicks button, toggle the next one 
btn.addEventListener('click', toggler); 

function toggler() { 
    $('.hidemsg').hide(); 
    $('#msg' + index).show(); 

     // go to 1 again when the end is reached 
    index = (index + 1 <= numMessages) ? index + 1 : 1; 
} 

https://jsfiddle.net/j32yjsaw/1/

Answer 5

我用了很多的意見，以幫助您看看到底是什麼在功能上是怎麼回事。但基本上，我通過使用toggle錨點中的data-屬性來跟蹤應該顯示哪個div。

//Set up the click event listener 
 
$('#toggler').on('click', function() { 
 
    
 
    //Get the 'count' data property from the anchor tag 
 
    var counter = $(this).data('count'); 
 
    
 
    //assign that to be the ID of the message you want to display 
 
    var nextMessage = '#msg' + counter; 
 
    
 
    $(nextMessage).show(); //Show that Message 
 
    
 
    counter += 1; //increment counter (for next click) 
 
    $(this).data('count', counter); //assign new counter var to #toggler 
 
});

.hidemsg { 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<a href="#" data-count="2" id="toggler" type="button" class="btn btn-default">New Message</a> 
 
<div id="msg2" class="hidemsg"> 
 
    <label for="commentcont" class="control-label">Message 2:</label> 
 
    <input type="text" class="form-control" name="comment2" placeholder="New message." /> 
 
</div> 
 
<div id="msg3" class="hidemsg"> 
 
    <label for="commentcont" class="control-label">Message 3:</label> 
 
    <input type="text" class="form-control" name="comment3" placeholder="New message." /> 
 
</div> 
 
<div id="msg4" class="hidemsg"> 
 
    <label for="commentcont" class="control-label">Message 4:</label> 
 
    <input type="text" class="form-control" name="comment4" placeholder="New message." /> 
 
</div> 
 
<div id="msg5" class="hidemsg"> 
 
    <label for="commentcont" class="control-label">Message 5:</label> 
 
    <input type="text" class="form-control" name="comment5" placeholder="New message." /> 
 
</div>

Answer 6

我想保持簡短而親切，在這裏你想點擊的元素和下一個元素。讓我知道這是否適合你。祝你好運！

$(function() { 
 

 
    $('.js-button').click(function() { 
 
    if ($('div.active').next().hasClass('hidemsg')) { 
 
     $('div.active').next('div').addClass('active').end().removeClass('active'); 
 
    }else{ 
 
     alert('Sorry, there is no next message'); 
 
    } 
 
    }); 
 

 

 
});

.hidemsg { 
 
    display: none; 
 
} 
 

 
.hidemsg.active { 
 
    display: block; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="msg1" class="hidemsg active"> 
 
    <label for="commentcont" class="control-label">Message 2:</label> 
 
    <input type="text" class="form-control" name="comment2" placeholder="New message." /> 
 
</div> 
 
<div id="msg2" class="hidemsg"> 
 
    <label for="commentcont" class="control-label">Message 3:</label> 
 
    <input type="text" class="form-control" name="comment3" placeholder="New message." /> 
 
</div> 
 
<div id="msg3" class="hidemsg"> 
 
    <label for="commentcont" class="control-label">Message 4:</label> 
 
    <input type="text" class="form-control" name="comment4" placeholder="New message." /> 
 
</div> 
 
<div id="msg4" class="hidemsg"> 
 
    <label for="commentcont" class="control-label">Message 5:</label> 
 
    <input type="text" class="form-control" name="comment5" placeholder="New message." /> 
 
</div> 
 

 
<a href="#" type="button" class="btn btn-default js-button">New Message</a>