Javascript toggeln mehrere div eins nach dem anderen durch Klicken derselben Schaltfläche

Question

So habe ich diesen Code in meinem Formular, und ich möchte jedes Divs eins nach dem anderen durch wiederholtes Klicken auf die gleiche Schaltfläche wechseln. Aber wenn ich auf die Schaltfläche klicke, wird alles angezeigt. Gibt es eine Möglichkeit, sie einzeln durch Klicken auf die gleiche Schaltfläche umzuschalten?

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

Hier ist die Schaltfläche, die es schaltet;

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

Der JavaScript-Code zum Umschalten;

Ich bin nur ein Anfänger mit js und ich möchte die Eingaben eins nach dem anderen umschalten, indem Sie auf die gleiche Schaltfläche klicken. So ist es, wenn ich auf die neue Nachricht klicke: Message 2 will appear dann wenn ich es nochmal klicke, Message 3 will appear so weiter und so weiter.!

Answer 1

bin ich nicht sicher, aber versuchen, erwähnt unter code

Verwenden Sie den folgenden HTML-Code genannt:

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

Verwenden Sie den folgenden JavaScript-Code genannt:

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

Nun zu den CSS-Teil kommt :

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

Answer 2

Das Problem ist, dass alle Ihre Divs die gleiche ID haben. Wenn Sie die IDs ändern, so dass sie einzigartig sind, mit und zunehmender nachlaufWert (msg1, msg2, ...), kann die Funktion zu so etwas wie dies geändert werden:

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

Answer 3

Zum einen könnte es besser sein zu verwenden, eindeutige IDs auf div.

Für mehrere Elemente, Klasse bevorzugen.

Terans Lösung ist:

• auf Last, alle divs
• auf dem ersten Klick, erster div versteckt
• auf zweiten Klick zweiter div versteckt
• ...
angezeigt

Es bedeutet, können Sie verwenden $(".my_class:visible").first().toggle();

Answer 4

Zunächst kann ein ID nur einmal verwendet werden.

Was Sie tun können, wenn ich Ihre Frage richtig verstehe, ist zuerst alle Nachrichten ausblenden und die erste anzeigen.

Dann, wenn der Benutzer auf die Schaltfläche klickt, zeigen Sie die zweite, dann die 3. usw. Ich bin nicht gern ein Inline-Click-Handler, so fügte ich eine eventListener in JS.

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

habe ich eine Menge Kommentare Sie genau sehen, zu helfen, was in der Funktion vorging. Aber im Grunde verfolge ich, welches div angezeigt werden sollte, indem ich ein data- Attribut im toggle Anker verwende.

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

Ich möchte es kurz und bündig halten, wo Sie geklickt Element und das nächste Element denken. Lassen Sie mich wissen, ob das für Sie funktioniert. Viel Glück!

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