0

我正在尝试实现一个计时器功能，该功能将滚动浏览表中的每个 td 标记并使其“被选中”。这会自动发生。可以通过单击特定的 td 标记并“选择”该标记来覆盖它。播放按钮将启动序列。停止按钮将停止序列。

这是我制作表格的 javascript 代码（每个 td 的 id 由一个唯一的“物种 id”编号和年份组成，从 1966 年到 2012 年）。它在body标签中。

    <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>

这是我当前使用的 jquery 函数，它使用 mouseover 事件来选择特定的 td 标记（它在 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 - 一次只有一个元素.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 回答