在另一个之后执行单击一个div

Question

我希望你能理解我的问题。

目前我有一个JS函数，可以随机选择特定Html类的div。

现在我想重写一个接一个div的函数，就像它们在HTML内容中订购一样。

我该怎么做？

有关信息：使用jquery进行随机选择，如下所示：

function pickrandom() {
   var elems = $(".classname");
   if (elems.length) {
       var keep = Math.floor(Math.random() * elems.length);
       console.log(keep);
       $(elems[keep]).click();
   }
}

由于

Answer 1

希望这有助于您 - 无法看到您的标记，但它应该让您走上正轨。我还将您的.click()更改为.trigger('click')，这应该更加可靠。

的JavaScript

function pickrandom() {
    var elems = $(".classname");
    if (elems.length) {
        var curTarget = Math.floor(Math.random() * elems.length);
        console.log(curTarget);
        $(elems[curTarget]).trigger('click');

        // Find index of our next target - if we've reached
        // the end, go back to beginning
        var nextTarget = curTarget + 1;
        if( nextTarget > elems.length ) {
            nextTarget = 0;
        }

        // Wait 3 seconds and click the next div
        setTimeout( function() { $(elems[nextTarget]).trigger('click'); }, 3000 );
    }
}

Answer 2

        $(document).on('click', '.classname', function(){
            var self = $(this);
            var  total_items = $('.classname').length; // 10
            var index = self.index(); //2 for 3rd element
            if (index < total_items) {
                setTimeout(function () {
                    $('.classname').eq(index+1).trigger('click');
                }, 3000);
            }    
        });

这将在3秒间隔内调用下一次点击

我不知道您使用随机函数功能的原因。您可以允许用户点击

Answer 3

＆＃13;

＆＃13;

$("div").click(function() {
  var el = $(this);
  setTimeout(function() {
    console.log(el.text());
    el.toggleClass("click");
  }, 2000);
});

var random = Math.floor((Math.random() * $("div").length) + 1);
var index = random - 1;
console.log("Random number: ", random);

var clicker = setInterval(function() {
  if (index === $("div").length) {
    clearInterval(clicker);
    console.log("cleared interval");
  } else {
    $("div").eq(index).click();
    index++;
  }
}, 2000)

＆＃13;

div {
  height: 50px;
  width: 100%;
  border: 2px solid black;
  background-color: lightgreen;
  margin-bottom: 10px;
  text-align: center;
  font-size: 30px;
}
.click {
  background-color: lightblue;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  Div 1
</div>
<div>
  Div 2
</div>
<div>
  Div 3
</div>
<div>
  Div 4
</div>
<div>
  Div 5
</div>
<div>
  Div 6
</div>

＆＃13;

＆＃13;

＆＃13;