Jquery 显示/隐藏切换下一步

Question

我在页面上有多个产品都通过数据库拉入。 在每个下面我都有一个评论框，我想通过点击评论按钮来显示和隐藏。

我的 Javascript：

$(document).ready(function(){

    $("#product-box div#product-comment-box").hide();
    //$("#product-box div.comment").show();

$("#product-box div.comment").click(function(){
    $("li div#product-comment-box").toggle();
}); 

我的产品区域 HTML：

<li><div id="product-box">
    <div id="product-image"><a href="#"><img src="images/image_2.jpg"></a></div>
    <div id="product-controls">
        <a href="#"><div id="button" class="more"><p>More</p></div></a>
        <a href="#"><div id="button" class="add"><p>Add</p></div></a>
        <div id="button" class="comment"><p>Comment</p></div>
        <a href="#"><div id="button" class="like"><p>Like</p></div></a>
    </div>
    <p>Product Name</p>
    <div id="product-comment-box">Comment</div>
    </div></li>

但这是设法切换每个产品上的所有评论框，我如何最好地将它们分开？我尝试使用 next 和 nextAll，但没有成功。

谢谢

Answer 1

您必须使用this 来引用当前评论。记住选择器在做什么，获取 DOM 中匹配的所有内容。

$("#product-box div.comment").click(function(){
    $(this).closest('li').find('div#product-comment-box').toggle();
}); 

虽然按 id 选择似乎不是一个好主意。尝试给那个 div 一个类，然后选择它。

//Change
<div id="product-comment-box">Comment</div>

//To
<div class="product-comment-box">Comment</div>  

//then select using class instead.
$("#product-box div.comment").click(function(){
    $(this).closest('li').find('div.product-comment-box').toggle();
}); 

Answer 2

你也可以尝试这种方式...传递 id 像

              <div id="comment<?php echo "Your db id" ?>" class="show_to_public">

              </div>
              <div id="product-comment-box<?php echo "Your db id" ?>">

              </div>

这样您就可以在您的 jquery 中将其分隔为..

      $('.show_to_public').click(function(e){   
        var id=$(this).attr("id").replace("comment","");
        $('#product-comment-box'+id).toggle();
      });

Answer 3

在点击处理程序中，this 关键字指的是您点击的元素。

来自docs：

handler 参数采用回调函数，如上所示。在处理程序中，关键字 this 指代处理程序绑定到的 DOM 元素。要使用 jQuery 中的元素，可以将其传递给普通的 $() 函数。例如：

$('#foo').bind('click', function() {
  alert($(this).text());
});

您需要利用该元素来找到您要查找的元素。在你的例子中，这样的事情会起作用：

$(this).closest('li').find('.product-comment-box')

...几乎。请注意，我使用了一个名为“product-comment-box”的类而不是 ID。这是因为 ID 仅用于唯一元素，并且永远不应该用于多个元素。因此，您还需要将所有重复的 ID 替换为类。只需将 'id' 替换为 'class' 应该可以在您使用的 sn-p 中使用，但按钮除外，因为它们已经有一个类。对于那些，你可以用空格分隔类：

<div class="button like">...