我有一个带有扰流板的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);
});
});