Question

我有一个while循环，显示select查询的结果。然后，对于查询返回的每个结果，有一个链接，一旦点击，将显示一个消息表单。再次单击该链接，将隐藏消息表单。它是使用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

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;
});

...的CSS

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

实时DEMO HERE

Answer 3

"<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>"

仅在一个WHILE循环结果上显示div

3 个答案: