Question

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

我想选择每个扰流板并给它们一个onclick功能来查看或隐藏点击的扰流板的答案。这可以在for循环中完成哪些变量。我在Chrome调试器中没有出错，但是这些类不会改变。

没有for循环就可以正常工作。

这是我的一部分：

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

这是我的javascript使用jquery：

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表示单击的当前元素，并且您想要选择它旁边的锚点，因此您不必创建选择器。另外，实际的原因是，您在处理程序中使用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绑定事件：

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

for循环中的多个函数

1 个答案: