javascript - for 循环中的多个函数

Question

我有一个带有剧透的 php 页面，我使用 javascript 来查看或隐藏剧透。这是通过更改每个扰流板 div(.hidden、.visible)范围内的类来完成的。类别为 s1、a1、s2、a2、s3、a3 等。

我想选择每个扰流板并给它们一个 onclick 函数来查看或隐藏单击的扰流板的答案。这可以通过 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);
    };
}

感谢您的帮助!

Answer 1

在您的情况下，只需使用 $(this).next('span') 而不是 $("a"+ i)。因为处理程序中的 this 代表当前单击的元素，并且您想要选择它旁边的 anchor ，所以您不必创建选择器。实际原因还在于，您在处理程序中使用 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);
    };
}

<强> Demo

用jquery绑定(bind)事件:

$(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);
    });
});