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顯示/隱藏切換下一個

回答

相關問題