切换功能在jquery

Question

从上面的图片中我可以看到我的切换功能在第一篇文章中正常工作，但它在第二篇文章中不起作用我的代码就像这样

<input type="submit" name="submitcomment" value="comment" id="comment"></div><hr>
<div id="commentbody" style="display:none;"><input type="text" name="postcomment"></div>

我的jquery代码就像这样

$('#comment').click(function()
{
    $('#commentbody').toggle();
});

如何使切换功能适用于所有帖子

Answer 1

看起来你有重复的ID。 ID应始终是唯一的。 $('#comment')只会定位具有id注释的第一个元素。由于哪个事件没有附加到第二个元素。

您可以提供相同的课程（比如说comment）来提交按钮和其他课程（比如commentbody）到div commentbody：

<div><input type="submit" name="submitcomment" value="comment" class="comment"></div><hr>
<div class="commentbody" style="display:none;"><input type="text" name="postcomment"></div>

然后使用类选择器绑定事件和目标下一个commentbody div：

$('.comment').click(function(){
 $(this).parent().nextAll('.commentbody').first().toggle();
            //or
 $(this).parent().nextAll('.commentbody').eq(0).toggle();
});

Answer 2

问题是您不能在页面上多次使用相同的ID，因此需要以其他方式识别这些元素的 。

我会使用类，然后：

$('.comment').click(function()
{
    $(this).nextAll(".commentbody").first().toggle();
});

直播示例：

$('.comment').click(function()
{
    $(this).nextAll(".commentbody").first().toggle();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="submit" name="submitcomment" value="comment" class="comment"><hr>
<div class="commentbody" style="display:none;"><input type="text" name="postcomment"></div>
<input type="submit" name="submitcomment" value="comment" class="comment"><hr>
<div class="commentbody" style="display:none;"><input type="text" name="postcomment"></div>
<input type="submit" name="submitcomment" value="comment" class="comment"><hr>
<div class="commentbody" style="display:none;"><input type="text" name="postcomment"></div>

注意：您的标记示例包含</div>元素之后的错误#comment，我在上面删除了该元素。 如果#comment位于div内，而您未显示开头，则句柄的内容需要使用.parent()：

$('.comment').click(function()
{
    $(this).parent().nextAll(".commentbody").first().toggle();
});

直播示例：

$('.comment').click(function()
{
    $(this).parent().nextAll(".commentbody").first().toggle();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div><input type="submit" name="submitcomment" value="comment" class="comment"></div><hr>
<div class="commentbody" style="display:none;"><input type="text" name="postcomment"></div>
<div><input type="submit" name="submitcomment" value="comment" class="comment"></div><hr>
<div class="commentbody" style="display:none;"><input type="text" name="postcomment"></div>
<div><input type="submit" name="submitcomment" value="comment" class="comment"></div><hr>
<div class="commentbody" style="display:none;"><input type="text" name="postcomment"></div>

Answer 3

您不能拥有多个具有相同ID的元素。尝试为每个评论按钮和评论正文生成唯一ID。

$('#comment').click(function()
{
    $('#commentbody').toggle();
});

$('#comment1').click(function()
{
    $('#commentbody1').toggle();
});

我不建议使用ID。在我看来，这样做的正确方法是为所有按钮提供相同的类和数据目标属性，并为评论主体提供唯一的ID。

<button class='commentBtn' data-target='commentBody1'>
<button class='commentBtn' data-target='commentBody2'>
<div id='commentBody1'>
<div id='commentBody2'>

<script>
$('.commentBtn').click(function(){
  var target = $(this).data('target');
  $('#'+target).toggle();
});
</script>

Answer 4

ID在页面中应该是唯一的，您不能在一个页面中拥有多个具有相同ID的元素。在您的情况下，您可以执行以下操作（而不是 id 使用类）

<div>
    <input type="button" name="submitcomment" value="comment" class="comment">
</div>
<div class="commentbody" >
     <input type="text" name="postcomment">
</div>

你的JS代码如下： -

$(document).ready(function(){
    $(".comment").click(function() {
        $(this).parent().next(".commentbody").toggle();
    });
});

希望这会对你有所帮助。祝你好运