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

【问题标题】：Show div on only one WHILE Loop result仅在一个 WHILE 循环结果上显示 div
【发布时间】：2011-12-28 03:36:27
【问题描述】：

我有一个 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 个消息表单。我只希望选择链接的结果是唯一一个弹出消息表单的结果。谢谢！

【问题讨论】：

也许在点击另一个链接之前使用 .remove？
@RPM 怎么样？抱歉，我对 Jquery 很陌生。
不知道你想在这里得到什么。您生成一长串带有从数据库中提取的 ID 号的<a> 标签。然后输出一个带有从查询字符串中提取的 ID 的表单？这两者有什么关系？
你能提供更多细节吗？您是说当您单击弹出窗口时，它会显示所有结果，而不仅仅是链接的结果？如果是这样 - 这听起来像是 PHP 错误。或者，您是说您只希望一次能够点击其中一个链接？如果您可以链接一个实时示例，它可能会有所帮助。
点击链接后，您的数据是否会进入 showMessageForm？它与之前点击的数据重叠，对吗？然后在 click)function() $('.showMessageForm').remove();

标签： php javascript jquery mysql html

【解决方案1】：

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

您正在显示/隐藏类的所有元素。您只想显示或隐藏单击的链接的下一个元素。（看到您的 PHP 代码，我假设 div 将始终是链接之后的下一个元素）。

$(document).ready(function(){

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

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

 });

【讨论】：

在我用你的代码替换了我的代码后，表单现在总是显示，无法隐藏。链接也消失了。
检查我发布的 jsfiddle 链接上的工作演示。你想要的对吗？
另外，要分配的id是动态插入的。它在一个while循环中。
是的，这只是您的 PHP 代码将生成的示例输出。我刚刚用 HTML 替换了 PHP 变量，以模拟从您的 PHP 输出的 HTML 代码。
对不起我以前的cmets。它现在完美运行！太感谢了！非常感谢您的帮助！

【解决方案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

【讨论】：

我使用了你的代码，但点击链接不显示消息表单
检查您的 php/html 格式。正如我发布的那样，您那里有几个错误。很有趣.. 喜欢我的 coe.. 但在别处给出了答案。

【解决方案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>"

【讨论】：

请不要介意，它非常适合我。只是一个拼写错误。