for循环中的多个函数

Multiple functions in a for loop

本文关键字：函数 循环 for      更新时间：2023-09-26

我有一个带有扰流板的php页面，我使用javascript查看或隐藏扰流板。这是通过改变每个扰流器div（.hidden，.visible）跨度上的类来完成的。这些类是s1、a1、s2、a2、s3、a3等。

我想选择每个剧透，并给他们一个点击功能，以查看或隐藏点击的剧透的答案。这可以在for循环中的哪些变量中完成。我在Chrome调试器中没有得到任何错误，但类不会更改。

它在没有for循环的情况下运行良好。

这是我的php:的一部分

<div class="spoiler">
    Is this a second question 
    <a href="#" id="s1">View answer</a>
    <span id="a1" class="hidden">Yes it is</span>
    <hr />
</div>          
<div class="spoiler">
    Is this a second question 
    <a href="#" id="s2">View answer</a>
    <span id="a2" class="hidden">Yes it is</span>
    <hr />
</div>

这是我使用jquery的javascript：

window.onload = function () {
    for (var i = 1; i < 2; i++) {
        var s = [];
        s[i] = document.getElementById("s" + i);
        s[i].addEventListener("click", function () {
            var a = [];
            a[i] = document.getElementById("a" + i);
            if ($("a" + i).hasClass("hidden")) {
                $("a" + i).removeClass("hidden");
                $("a" + i).addClass("visible");
                $("a" + i).html("Hide answer");
            } else if ($("a" + i).hasClass("visible")) {
                $("a" + i).removeClass("visible");
                $("a" + i).addClass("hidden");
                $("a" + i).html("View answer");
            }
        }, true);
    };
}

谢谢你的帮助！

在您的情况下，只使用$(this).next('span')而不是$("a" + i)。因为处理程序中的this表示单击的当前元素，并且您希望选择它旁边的锚点，所以不必创建选择器。另外，实际原因是，您在处理程序中使用i作为共享变量，在调用处理程序时，该变量将运行到迭代的最后一个值。另外，你的html中有重复的id，它只会选择与选择器匹配的第一个项目。

尝试：

window.onload = function () {
    for (var i = 1; i <= 2; i++) {
        var s = document.getElementById("s" + i);
        s.addEventListener("click", function () {
            var $this = $(this).next('span'), // or do $('#' + this.id.replace("a",""));
                msg = "View answer";
             $this.toggleClass("hidden visible") 
            if ($this.hasClass("hidden")) {
                msg  = "Hide answer";
            }
            $this.html(msg);
        }, true);
    };
}

演示

将事件与jquery:绑定

$(function(){
    $('.spoiler [id^="s"]').click(function () {
        var $this = $(this).next('span'),
            msg = "View answer";
        $this.toggleClass("hidden visible")
        if ($this.hasClass("hidden")) {
            msg = "Hide answer";
        }
        $this.html(msg);
    });
});
相关文章：