0

テーブル内の各 td タグをスクロールして「選択」するタイマー関数を実装しようとしています。これは自動的に行われます。特定の td タグをクリックしてそのタグを「選択」することでオーバーライドできます。再生ボタンはシーケンスを開始します。停止ボタンはシーケンスを停止します。

これは、テーブルを作成する私が持っているJavaScriptコードです（各tdのIDは、一意の「種ID」番号と1966年から2012年までの年から構成されています）。ボディタグにあります。

    <script>
    var year = 1966;
    var speciesNum = document.getElementById("selectboxEnglish").value
    document.write("<table id='yeartable' border='0'>");

    for (var r=0; r<5; r++)
    {
        document.write("<tr>");
        for (var d=0; d<=9; d++)
        {
            document.write("<td id="+speciesNum+"_"+year+">" + year + "</td>");
            year+=1;
            if (year == 2013){break};
        }
        document.write("</tr>");
    }
    document.write("</table>");
</script>

特定のtdタグを選択するためにmouseoverイベントを使用する現在のjquery関数は次のとおりです(headタグにあります:

        $(document).ready(function () {
        $("td").addClass("unselected");

        $("td").mouseover(function () {
            $("td").removeClass("unselected");
            $("td").addClass("unselected");
            $(this).removeClass("unselected");
            $(this).addClass("selected");
            var fileName = getFileName($(this).attr("id"));
            $("#imgYear").attr("src", fileName);
            $("#imgYear").attr("alt", fileName);
        });
    });

助けてください。

4

1 に答える 1

0

この基本的な実装を参照してください.unselected。ただし、クラスが必要な理由がわからないため、クラスを使用していません (質問に対する私のコメントを参照してください)。解決策は次のとおりです (追加のコメント付き) (編集- 停止およびリセット機能を追加、編集 #2 - 一度に 1 つの要素のみ.selected):

JavaScript

// Establish a default queue (in your case, all your tds)
var originalQueue = queue = $("td"),
    selectionTimeout;

// Recursive function to highlight all elements
function highlight_all(elems) {
    // Remove selected class on all queue elements
    originalQueue.removeClass("selected");
    // Shift first element from list, and re-add selected class to it
    var next = elems.eq(0).addClass("selected");
    // Remove it from the queue
    queue = elems.slice(1);
    // If any more elements, set a timeout to repeat in 100ms
    if (queue.length) {
        selectionTimeout = setTimeout(function () {
            highlight_all(queue)
        }, 100);
    }
}

// Start the selections based on current queue
$("#start").on("click", function () {
    highlight_all(queue);
});

// Clear the timeouts, stopping any more being selected
$("#stop").on("click", function () {
    clearTimeout(selectionTimeout);
});

// Clear the timeout, reset the queue to it's default state
// and remove selected classes
$("#reset").on("click", function () {
    clearTimeout(selectionTimeout);
    originalQueue.removeClass("selected");
    queue = originalQueue;
});
于 2013-07-30T13:51:26.417 に答える