Jquery显示/隐藏切换下一个

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

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

感谢

来源

2012-04-17 Anthony1234

必须使用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-17 02:32:28 mrtsherman

如何从那里选择'＃product-comment-box'？欢呼声 – Anthony1234 2012-04-17 02:44:31

通过使用'$（'selector'，this）'你可以限制范围。试试我编辑的答案。没有你的html，我只是猜测。我无法从您的选择器中推断出您的html结构。 – mrtsherman 2012-04-17 03:03:53

我尝试了你上面提到的但没有运气，不会运行。我在上面添加了我的HTML区域。感谢堆 – Anthony1234 2012-04-17 03:10:29

你也可以尝试这种方式......通过ID在DIVID像

   <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-17 03:11:42 Pushparaj

这是我通常做的方式，当我在loop.hope中检索数据时，这一定会帮助你。 – Pushparaj 2012-04-17 03:15:09

内点击处理程序，this关键字引用您单击的元素。

从docs：

处理程序参数接受一个回调函数，如上所示。在处理程序中，关键字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">...

来源

2012-04-17 03:15:13 undefined

只是注意到我或多或少重复了mrtsherman的回答......这里有值得保留的有用信息，还是应该删除我的答案？ – undefined 2012-04-17 03:28:50

Jquery显示/隐藏切换下一个

回答

相关问题