0

我想在点击时连续循环一个数组。如果您可以在班级切换之间延迟工作，则可以提供额外的道具:-)

我做到了这一点：

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

});

这一点也不远:-)

有小费吗？

4

3 回答 3

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();
});
于 2012-08-23T05:49:54.173 回答
0

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

于 2012-08-23T05:47:56.823 回答
0

我相信您希望在删除类和添加类之间延迟 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('class'); 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
    });

});
于 2012-08-23T05:38:52.593 回答