Question

当我操作小提琴时，文本“a”应该在没有click事件的情况下自动更改，并且必须一个接一个地延迟更改，我该怎么做？

$(document).ready(function() {
  var element = ".pictures";
  var delay = 2 * 1000; //2 Seconds

  function change() {
    $(element).one('click', function() {
      $(this).text("Changed");
    })
  }

  change();
  setInterval(change(), delay);
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="pictures">a</div>
<div class="pictures">a</div>
<div class="pictures">a</div>
<div class="pictures">a</div>
<div class="pictures">a</div>
<div class="pictures">a</div>

Here's the fiddle

Answer 1

您需要trigger() change函数中的点击处理程序。此外，您需要将函数引用传递给setInterval()方法，并在单击所有元素后使用clearInterval()取消操作。

$(document).ready(function() {

  //Cache elements
  var element = $(".pictures");

  //variable to maintain index of clicked item
  var i = 0;

  //2 Seconds
  var delay = 2 * 1000;

  //Bind event handler
  element.one('click', function() {
    $(this).text("Changed");
  })

  function change() {
    if (i == element.length && interval) {
      clearInterval(interval);
    }

    //get element at index using .eq() and trigger click handler
    element.eq(i++).trigger('click');
  }

  //Execute on page load
  change();

  //On interval
  var interval = setInterval(change, delay);
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="pictures">a</div>
<div class="pictures">a</div>
<div class="pictures">a</div>
<div class="pictures">a</div>
<div class="pictures">a</div>
<div class="pictures">a</div>

Update Fiddle

Answer 2

这应该这样做：

  $(document).ready(function() {
        var elementSelector = ".pictures";
        var delay = 2 * 1000; //2 Seconds

        function change(element, delayIndex) {
            setTimeout(function(){
              element.text("Changed");
            }, delay*delayIndex);
        }

        $(elementSelector).each(function(i, v){
            change($(v), i);
        });

    });

这是fiddle

Answer 3

使用eq()方法根据索引获取元素，并使用计数器变量逐一选择。

$(document).ready(function() {
  var element = ".pictures";
  var delay = 2 * 1000; //2 Seconds
  var $ele = $(element),
    i = 0;

  function change() {
    // get the element by index and update
    $ele.eq(i++).text("Changed"); 
    // clear the interval when updated all
    if (i == $ele.length) clearInterval(inter);
  }

  change();
  var inter = setInterval(change, delay);
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="pictures">a</div>
<div class="pictures">a</div>
<div class="pictures">a</div>
<div class="pictures">a</div>
<div class="pictures">a</div>
<div class="pictures">a</div>

Answer 4

请试试这个

$(document).ready(function() {
  var element = ".pictures";
  var delay = 2 * 1000; //2 Seconds
  
 
  

  function change(el) { 
      $(el).text("Changed");    
  }
  
  $.each($('.pictures'), function(i, el){

    $(el).css({'opacity':0});
      change(el);
    setTimeout(function(){
       $(el).animate({
        'opacity':1.0
       }, 450);
    },1000 + ( i * 1000 ));

  });

 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="pictures">a</div>
<div class="pictures">a</div>
<div class="pictures">a</div>
<div class="pictures">a</div>
<div class="pictures">a</div>
<div class="pictures">a</div>

Answer 5

<强> working fiddle

使用index引用下一个元素，并在索引等于div的数量时停止间隔：

$(document).ready(function()
{
  var element = ".pictures" ;
  var delay   = 2 * 1000 ; //2 Seconds
  var index = 0;
  var limit = $(".pictures").length ;

  $(element).one('click', function() {
    $(this).text("Changed");
  })

  function change(){
    if(index<limit)
      $(element+':eq('+index+')').click();
    else
      clearInterval(interval);

    index++;
  }

  change(index);
  var interval = setInterval(change, 500);
})

希望这有帮助。

＆＃13;

$(document).ready(function(){
  var element = ".pictures" ;
  var delay   = 2 * 1000 ; //2 Seconds
  var index = 0;
  var limit = $(".pictures").length ;

  $(element).one('click', function() {
    $(this).text("Changed");
  })

  function change(){
    if(index<limit)
      $(element+':eq('+index+')').click();
    else{
      clearInterval(interval);
      console.log('Intervel stopped.');
    }

    index++;
  }

  change(index);
  var interval = setInterval(change, 500);
})

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="pictures">a</div>
<div class="pictures">a</div>
<div class="pictures">a</div>
<div class="pictures">a</div>
<div class="pictures">a</div>
<div class="pictures">a</div>

＆＃13;

Answer 6

完成后逐个带索引和清除间隔

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="pictures">a</div>
<div class="pictures">a</div>
<div class="pictures">a</div>
<div class="pictures">a</div>
<div class="pictures">a</div>
<div class="pictures">a</div>
<script>
$(document).ready(function() {
  var element = ".pictures";
  var delay = 2 * 1000; //2 Seconds
  var tempIndex = 0;

  var interv = setInterval(change, delay);

  function change() {
    if(tempIndex < $(element).length){
        $(element+":eq("+tempIndex+")").text("Changed");
        tempIndex++;
    }else{
        clearInterval(interv);
    }
  }

})
</script>

在相同的类名称下逐个自动单击元素

6 个答案: