0

10 個の要素からなる順序付けられていないリストがあるとします。
それらの1つにクラスをランダムに追加し、数秒後にそのクラスを削除して、ランダムに選択された別の要素で無期限に再開したいと思います。

それを達成するための最もクリーンな方法は何でしょうか?

編集： これまでに得たもの：

<ul id="hideAndSeek">
  <li>...</li>
  <li>...</li>
  <li>...</li>
  <li>...</li>
  ...
</ul>

そしてjQuery：

var random = Math.floor(Math.random() * 1000);

var shownElement = $("#hideAndSeek li");
shownElement.eq(random % shownElement.length).addClass("shown");

ただし、これは明らかに継続的に実行されるわけではなく、クラスを削除する前に遅延を適切に設定する方法がわかりません。

4

2 に答える 2

3

を使用してタイマーを作成する必要がありsetIntervalます。その後、乱数を選択して、そのアイテム インデックスのクラスを設定できます。

このようなもの：

HTML

<ul>
    <li>one</li>
    <li>two</li>
    <li>three</li>
    <li>four</li>
    <li>five</li>
    <li>six</li>
    <li>seven</li>
    <li>eight</li>
    <li>nine</li>
    <li>ten</li>
</ul>

Javascript (JQuery を使用)

setRandomClass();
setInterval(function () {
    setRandomClass();
}, 2000);//number of milliseconds (2000 = 2 seconds)

function setRandomClass() {
    var ul = $("ul");
    var items = ul.find("li");
    var number = items.length;
    var random = Math.floor((Math.random() * number));
    items.removeClass("special");
    items.eq(random).addClass("special");
}

これが実際の例です

于 2013-08-07T10:55:26.213 に答える