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

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

Answer 2

首先，在div上使用唯一ID可能更好。

对于多个元素，请选择class。

Teran的解决方案是：

加载时，显示所有div
，隐藏第一个div
，隐藏第二个div
...

这意味着您可以使用https://graph.microsoft.com/v1.0/groups/[group id]/members

Answer 3

首先， ID 只能使用一次。

如果我理解你的问题，你可以做的是先隐藏所有信息并显示第一条信息。

然后，当用户点击按钮时，显示第二个，然后是第3个，等等。我不喜欢内联点击处理程序，所以我在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 4

我使用了很多评论来帮助您准确了解函数中发生了什么。但基本上，我在div锚中使用data-属性跟踪应显示哪个toggle。

＆＃13;

//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
});

＆＃13;

.hidemsg {
  display: none;
}

＆＃13;

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

＆＃13;

Answer 5

问题是你所有的div都有相同的id。如果您更改id以使它们是唯一的，并且使用并增加尾随值（msg1，msg2，...），则可以将该函数更改为如下所示：

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

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>

Javascript通过单击相同的按钮逐个切换多个div

6 个答案: