2010-08-07 88 views
1

我正在創建一個博客,並且已經設置好了,因此您可以在條目上留言。我不喜歡所有評論和參賽表格使用多少垂直空間,所以我希望在每個條目上都有一個鏈接,點擊它並顯示參賽表格和評論。我正在考慮一個類似「評論(5)」的鏈接。我一直在其他網站上看到這一點,但我不知道如何自己創建它。動態隱藏揭示

這是一些的HTML中條目之一的:

<div class="comments"> 
<form action="foxpost.php" method="post"> 

<label for="name">Name</label><br> 
<input id="name" name="name" type="text" /><br> 
<label for="message">Comment</label><br> 
<textarea class="message" id="message" name="message"></textarea><br><br> 
<input type="hidden" name="post_id" value="7" /> 

<input type="Submit" value="Post Comment" /> 
</form> 
<?php 
displayComments(7); 
?>  

</div> 

的displayComments();函數只是從數據庫中提取註釋的PHP。

我唯一能想到的就是改變to併爲每個評論區域使用不同的ID(例如「comments2」,「comments3」等),然後使用一個javascript函數,涉及document.getElementByID( ).style.display爲每個「commentsX」div更改不同的CSS條目。這只是似乎臃腫,所以我想知道是否有一個更簡單的方法來動態顯示和隱藏我的表單和PHP函數抓住評論。

回答

2

既然你問了一個更簡單的方法,我會去的jQuery的,沒必要不同的ID分配給他們,你只需要使用一個類和jQuery會自動顯示這樣相應的元素:

$('a.comment').click(function(){ 
    $(this).nextAll('.form').slideDown('slow'); 
}); 

在哪裏a.comment代表與類別comment.form的鏈接,表示包含您的評論的元素的類。

0

如果它的好隱藏整個評論的div,你可以給它一個ID:

<div class=comments id=comments> 

,並與普通的JavaScript表現出來:

document.getElementById("comments").style.display = "block" 
+0

他自己也認爲,他想知道一個更簡單的方法:) – Sarfraz 2010-08-07 21:45:07

+0

難道他不想通過更改每個單獨的評論的div來顯示它嗎?這個小小的變化和一條線似乎很容易。 – KeJi 2010-08-07 22:08:01