Javascript 如何仅为当前按钮实现onclick事件?
我希望在单击按钮时显示/隐藏具有子级的div,但不希望在不同的父块中显示/隐藏其他相同的div。 对不起,我的解释和js知识不好,也许代码可以说得更好:Javascript 如何仅为当前按钮实现onclick事件?,javascript,onclick,Javascript,Onclick,我希望在单击按钮时显示/隐藏具有子级的div,但不希望在不同的父块中显示/隐藏其他相同的div。 对不起,我的解释和js知识不好,也许代码可以说得更好: for (a = 0; a < document.querySelectorAll("#hidereplies").length; a++) { var btn = document.querySelectorAll("#hidereplies")[a]; btn.onclick = function () {
for (a = 0; a < document.querySelectorAll("#hidereplies").length; a++) {
var btn = document.querySelectorAll("#hidereplies")[a];
btn.onclick = function () {
for (var y = 0; y < document.querySelectorAll(".reply_comments").length; y++) {
var reply = document.querySelectorAll(".reply_comments")[y];
reply.style.display = (reply.style.display != 'none' ? 'none' : 'block');
}
};
}
for(a=0;a
.有几件事你做错了 首先,在HTML中,不要多次使用ID。您已为按钮指定了相同的ID 接下来,将querySelector结果分配给一个数组并迭代该数组 第三,您需要确定查询的范围。您正在检查
文档中的元素,因此所有内容都被拉入,而不是被限定到当前div
//note that I've changed from an ID to a class for your buttons
var buttons = document.querySelectorAll(".hidereplies");
for (a = 0; a < buttons.length; a++) {
var btn = buttons[a];
btn.onclick = function (event) {
var btn = event.currentTarget; //get the current button clicked
var comments = btn.parentNode.querySelectorAll(".reply_comments"); //scope the search
for (var y = 0; y < comments.length; y++) {
var reply = comments[y];
reply.style.display = (reply.style.display != 'none' ? 'none' : 'block');
}
};
}
//注意,我已将按钮的ID更改为类
var按钮=document.queryselectoral(“.hidereplies”);
对于(a=0;a
HTML
测试1-注释
只想隐藏当前“.reply\u注释”
测试2-注释
但并非全部
test3-无注释
您更新的fiddle-我想指出的一点是,您不应该在for
声明中调用函数。将长度设置为变量。通过这样做,您可以在每次迭代中调用document.queryselectoral()
。是的,始终使用变量,但这次认为最好定义完整查询,因为我在问noob问题:)谢谢您的建议,希望所有javascript新手都能学到这一课。谢谢您的帮助,但没有奏效。这里是完整的脚本,再次抱歉像total noob一样提问。提问很好,这就是这个网站的目的。问题不在于代码,而在于标记。对我来说,理解标记的结构有点困难,因为那里有很多无用的标记。清理结构并尝试仅使用2或3条注释。最有可能的原因是需要修改btn.parentNode以获得正确的父容器。@glebcha另外,请查看这是否是您想要的-我注意到回复注释与按钮不在同一级别。是的,感谢您在@JohnP!非常感谢你,我希望我有足够的声望点数给你:)深夜让我如此愚蠢,以至于错过了一个事实,那就是我必须再次升级才能获得准确的元素。
<div class="comments_list">
<div class="comment_item">
<div class="comment_body">test1 - comments</div>
<input type="button" class="hidereplies" value="show replies" />
<div class="reply_comments">
<div class="comment_body">want to hide only current ".reply_comments"</div>
</div>
</div>
<div class="comment_item">
<div class="comment_body">test2 - comments</div>
<input type="button" class="hidereplies" value="show replies" />
<div class="reply_comments">
<div class="comment_body">but not all</div>
</div>
</div>
<div class="comment_item">
<div class="comment_body">test3 - no comments</div>
<div class="reply_comments"></div>
</div>
</div>