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

クラスを削除してからクラスを追加するまでに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 に答える
0

「配列を連続的にループする」これは無限ループのように聞こえますが、あなたはそれを望んでいないと思います。ループの一時停止について、これは可能です、あなたはこれを使うことができます

于 2012-08-23T05:47:56.823 に答える