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。简单地用'class'替换'id'应该在你使用的代码片段中工作，除了按钮，因为它们已经有了一个类。对于那些，您可以用空格分隔类：

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

Jquery显示/隐藏切换下一步

3 个答案: