Question

我想在点击时连续循环一个数组。如果你可以在班级开关之间延迟工作，可以使用额外的道具： - ）

我到目前为止：

// Define word
var text = "textthing";

// Define canvas
var canvas = 'section';

// Split word into parts
text.split();

// Loop over text
$(canvas).click(function() {

    $.each(text, function(key, val) {
        $(canvas).removeAttr('class').addClass(val);
    });

});

这根本不太远： - ）

任何提示？

Answer 1

以下内容将一直等到您在var el中单击所选元素。在此示例中，var el = $('section')将选择文档中的所有<section>...</section>元素。

然后它将开始循环遍历cssClassNames中的值，依次使用每个值作为所选元素上的css类名称。在每次课程更改之间将使用delayInMillis的延迟。

var cssClassNames = ['c1', 'c2', 'c3'];
var el = $('section');
var delayInMillis = 1000;

// Loop over text
el.click(function() {
  var i = 0;
  function f() {
    if( i >= cssClassNames.length ) {
      i = 0;
    }
    var currentClass = cssClassNames[i];
    i += 1;

    el.removeClass().addClass(currentClass);
    setTimeout(f, delayInMillis);
  }
  f();
});

Answer 2

我相信你想要在删除类和添加类之间延迟X毫秒。我不确定你是否必须标记//行？或者甚至他们完成这项工作，但你必须拥有的是一种将价值纳入职能的方法。此外，setTimeout anon函数可能实际上不需要参数，但它应该给你一个想法。

$(canvas).click(function() {

    $.each(text, function(key, val) {
        $(canvas).removeAttr('class')
        var $canvas = $(canvas) //?
        var class_val = val  //?
        setTimeout(function ($canvas, class_val) {
            $canvas.addClass(class_val);
        }, 2000);

   });

});

编辑：我会这样做 function modify_element（$ element，class_name）{ $ element.removeClass（ '类'）; setTimeout（function（$ element）{ $ element.addClass（CLASS_NAME）; }，1000）; //删除后添加1秒类 }

$(canvas).click(function() {

    $.each(text, function(key, val) {
        setTimeout(modify_element($(canvas), val),2000);
        //this will loop over the elements with 2 seconds between elements
    });

});

Answer 3

“连续循环一个数组”这听起来像一个无限循环，我不认为你想要那样。关于暂停循环，可以使用this

通过暂停不断循环js数组

3 个答案: