Javascript複数のdivを同じボタンをクリックして1つずつ切り替えます

Question

このコードをフォームに入れて、同じボタンを繰り返しクリックして各divを1つずつ切り替えたいとします。しかし、ボタンをクリックすると、すべてが表示されます。同じボタンをクリックして、1つずつ切り替える方法はありますか？

<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の初心者です。同じボタンをクリックすることで、入力を1つずつ切り替えることにします。だから私は新しいメッセージをクリックしたときのように：Message 2 will appearその後、私は再びそれをクリックすると、Message 3 will appearように。

Answer 1

は私はわからないが、以下試してくださいcode

使用して、以下のHTMLコード言及言及：今

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

CSSのパートに来る：

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

使用して、以下のJavaScriptコードを言及します：

.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を使用することができます。1回。

私はあなたの質問を正しく理解していれば、まずすべてのメッセージを非表示にして最初のメッセージを表示します。

ボタンをクリックすると、2番目、3番目などを表示します。 私はインラインクリックハンドラが好きではないので、私はeventListenerを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

私はあなたが関数内で起こっていた正確に何見るのを助けるために多くのコメントを使用していました。しかし、基本的には、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

私はあなたがクリックした要素と次の要素を考える場合には、短いと甘いそれを維持したいと思います。それがあなたのために働くかどうか私に教えてください。がんばろう！

あなたは `divを非表示にhidemsg`を使用した場合の

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