只顯示一個WHILE循環結果

Question

我有一個while循環顯示選擇查詢的結果。然後，對於查詢返回的每個結果，有一個鏈接一旦被點擊，就會顯示一個消息表單。再次單擊鏈接，消息窗體將被隱藏。它是使用JQuery插件製作的。現在的問題是，如果我點擊鏈接，所有結果將顯示消息表單，而不是僅顯示一個，這應該來自鏈接被點擊的結果。代碼如下所示：

PHP + HTML

<?php 
    $query = mysql_query(......) or die(mysql_error()); 
    while($row = mysql_fetch_assoc($query)){ 
     $id = $row['Id']; 
     echo "<a class='hideMessageForm' href='#foo?id=" . $row['Id'] . "'>" . $row['Name'] . "</a>" .  
     "<div id='foo' class='showMessageForm'> 
      <form action='process.php' method='post'> 
       <input type='hidden' name='id' value='" .$id "'/> 
       <input type='text' name='message' value=''/> 
       <input type='submit' name='sendMessage' value='Send Message'/> 
      </form> 
     </div>"; 
    } 
?> 

的JavaScript

$(document).ready(function(){ 

    $(".showMessageForm").hide(); 
    $(".hideMessageForm").show(); 

    $('.hideMessageForm').click(function(){ 
    $(".showMessageForm").slideToggle(); 
    }); 

}); 

讓我來解釋我希望發生

例如東西，該查詢返回3個結果（結果＃1，＃2，＃3）。每個結果都顯示引用foo div的鏈接。如果我點擊結果＃1中的鏈接，＃2和＃3也會彈出消息表單。點擊3個結果中的任何一個的鏈接將顯示3個消息表單。我只想要選擇鏈接的結果是唯一彈出消息表單的結果。謝謝！

Answer 1

這就是你想要的。 http://jsfiddle.net/qEeZf/

您正在顯示/隱藏類的所有元素。您只想顯示或隱藏點擊鏈接的下一個元素。 （看到你的PHP代碼，我假設div始終是鏈接後的下一個元素）。

$(document).ready(function(){ 

    $(".showMessageForm").hide(); 
    $(".hideMessageForm").show(); 

    $('.hideMessageForm').click(function(){ 
    $(this).next(".showMessageForm").slideToggle(); 
    }); 

}); 

Answer 2

"<form action='process.php' method='post'> 
       <input type='hidden' name='id' value='".$id".'/> // Here was error 
       <input type='text' name='message' value=''/> 
       <input type='submit' name='sendMessage' value='Send Message'/> 
</form>" 

Answer 3

的PHP/MySQL的（你有在PHP/HTML的格式設置了一些錯誤。我糾正他們。）

<?php 
$query = mysql_query(......) or die(mysql_error()); 
while($row = mysql_fetch_assoc($query)){ 
    $id = $row['Id']; 
    echo "<a class='hideMessageForm' href='#foo" . $row['Id'] . "'>" . $row['Name'] . "</a>" .  
    "<div id='foo" . $row['Id'] . "'' class='showMessageForm'> 
     <form action='process.php' method='post'> 
      <input type='hidden' name='id' value='" . $row['Id'] . "'/> 
      <input type='text' name='message' value=''/> 
      <input type='submit' name='sendMessage' value='Send Message'/> 
     </form> 
    </div>"; 
} 
?> 

jQuery的.....

$(".hideMessageForm").click(function() { 
var dropD = $(this).attr("href"); 
if ($(dropD + ".opened").length) { 
$(".opened").slideToggle(300).removeClass("opened"); 
} else { 
$(".opened").slideToggle(300).removeClass("opened"); 
$(dropD).slideToggle(300).addClass("opened"); 
} 
return false; 
}); 

三網融合

.showMessageForm { display: none;} 
.opened { display: block; } 

和現場DEMO HERE