onClick 循环遍历多组 DIV？

Question

我对探索 JS 很陌生，但我一直在摆弄 this thread to come up with this: jsfiddle

中的代码

(function(){

var $hints = $('.hint');
var i = 0;

$('.hint').on('click', function(){
i = (i + 1) % $hints.length;
$hints.hide().eq(i).show();
});


})();

div.hint.hidden, div.hint2.hidden, div.hint3.hidden {display:none;}
div.hint-box, div.hint2-box, div.hint3-box{
    position:relative;
    padding:20px 40px 20px;
    background:grey;
    border:1px solid #CCCCCC;
    color:white;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="hint-box">
    <div class="hint">This is the first example...</div>
    <div class="hint hidden">This is the second example...</div>
    <div class="hint hidden">This is the third example...</div>    
    </div>
    <div class="hint2-box">
    <div class="hint2">This is the first example...</div>
    <div class="hint2 hidden">This is the second example...</div>
    <div class="hint2 hidden">This is the third example...</div>    
    </div>
    <div class="hint3-box">
    <div class="hint3">This is the first example...</div>
    <div class="hint3 hidden">This is the second example...</div>
    <div class="hint3 hidden">This is the third example...</div>    
    </div>

第一组 div 正在按照我想要的方式循环。我认为有一种方法可以通过复制 JS 并替换 classes (jsfiddle here) 来让其他两个工作。有没有一种编写 JS 的方法，我不需要为每个循环 class 组编写新的 JS？

Answer 1

<div class="hint-box">
    <div class="hint">This is the first example...</div>
    <div class="hint hidden">This is the second example...</div>
    <div class="hint hidden">This is the third example...</div>    
</div>
<div class="hint-box">
    <div class="hint">This is the first example...</div>
    <div class="hint hidden">This is the second example...</div>
    <div class="hint hidden">This is the third example...</div>    
</div>
<div class="hint-box">
    <div class="hint">This is the first example...</div>
    <div class="hint hidden">This is the second example...</div>
    <div class="hint hidden">This is the third example...</div>    
</div>


jQuery(function($){
    var $hintBoxes = $('.hint-box');

    //initialize data element to be 0 (i)
    $hintBoxes.data('displayedHint', 0);

    $('.hint').on('click', function(){
        var $this = $(this),
            $parent = $(this).parent(),
            $hints = $parent.find('.hint'),
            i = ($parent.data('displayedHint') + 1) % $hints.length;

        $hints.hide().eq(i).show();
        //update which one is displayed
        $parent.data('displayedHint', i);
    });
});

Answer 2

其实你可以使用jQueryDOM遍历方法轻松实现：

$(function(){
  $('.hint').on('click', function(){
    var $hint = $(this);
    //if next element is present
    if($hint.next().length > 0){
      $hint.next().show().siblings().hide();
    }
    //if you do not want to show the first message again then just delete the else part written below
    else{
      //if next element is not present then startover from first
      $hint.siblings().first().show().siblings().hide();
    }
  });
});

$(function(){
  $('.hint').on('click', function(){
    var $hint = $(this);
    //if next element is present
    if($hint.next().length > 0){
      $hint.next().show().siblings().hide();
    }
    else{
      //if next element is not present then startover from first
      $hint.siblings().first().show().siblings().hide();
    }
  });
});

div.hint.hidden, div.hint2.hidden, div.hint3.hidden {display:none;}
div.hint-box, div.hint2-box, div.hint3-box{
    position:relative;
    padding:20px 40px 20px;
    background:grey;
    border:1px solid #CCCCCC;
    color:white;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="hint-box">
    <div class="hint">This is the first example...</div>
    <div class="hint hidden">This is the second example...</div>
    <div class="hint hidden">This is the third example...</div>    
    </div>
    <div class="hint-box">
    <div class="hint">This is the first example...</div>
    <div class="hint hidden">This is the second example...</div>
    <div class="hint hidden">This is the third example...</div>    
    </div>
    <div class="hint-box">
    <div class="hint">This is the first example...</div>
    <div class="hint hidden">This is the second example...</div>
    <div class="hint hidden">This is the third example...</div>    
    </div>

Answer 3

$('.hint').on('click', function() {
  // Get the number of hints
  var hintLength = $(this).next().length;

  if (hintLength === 0) { 
    //if were at the last hint, hide this hint and show the first
    $(this).addClass('hidden');
    $(this).siblings(':first').removeClass('hidden');
  } else { 
    // Otherwise, hide this hint and show the next
    $(this).addClass('hidden');
    $(this).next().removeClass('hidden');
  }
})

div.hint.hidden,
div.hint2.hidden,
div.hint3.hidden {
  display: none;
}

div.hint-box,
div.hint2-box,
div.hint3-box {
  position: relative;
  padding: 20px 40px 20px;
  background: grey;
  border: 1px solid #CCCCCC;
  color: white;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="hint-box">
  <div class="hint">This is the first example...</div>
  <div class="hint hidden">This is the second example...</div>
  <div class="hint hidden">This is the third example...</div>
</div>
<div class="hint-box">
  <div class="hint">This is the first example...</div>
  <div class="hint hidden">This is the second example...</div>
  <div class="hint hidden">This is the third example...</div>
</div>
<div class="hint-box">
  <div class="hint">This is the first example...</div>
  <div class="hint hidden">This is the second example...</div>
  <div class="hint hidden">This is the third example...</div>
</div>

onClick 循环遍历多组 DIV？

onClick Cycle Through Multiple Sets of DIVs?

jquery

html

css

cycle