1

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

我的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，但没有运气。

谢谢

4

3 回答 3

3

您必须使用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();
});
于 2012-04-17T02:32:28.623 回答
0

您也可以尝试这种方式...传递 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();
      });
于 2012-04-17T03:11:42.293 回答
0

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

从文档：

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' 应该可以在您使用的代码段中使用，但按钮除外，因为它们已经有一个类。对于那些，您可以用空格分隔类：

<div class="button like">...
于 2012-04-17T03:15:13.337 回答