jquery 仅在使用 ' 时适用于顶部 SQL 搜索结果回声在 PHP 中

Question

我编写了一个搜索代码，通过 PHP 显示 MySql 数据库中的数据。这是一个包含描述、价格、涵盖主题等的书籍列表...其中一些是基本的，需要立即查看（例如标题、价格），其中一些更复杂，不需要展示，除非由用户要求（例如描述、审阅者等...）。

我希望通过单击基本文本并下拉更复杂的文本来完成此操作。我选择了 Jquery 的“slidetoggle”函数，将基本文本包含在“basic”div 中，单击该函数时，会下拉第二个“more”div。

它对顶部结果起作用，但对任何进一步的输出不起作用，几乎就像脚本在第一组 div 之后停止一样，并且不继续对其他结果起作用。

我希望这是有道理的，这是我的代码 -

     <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js">

$(document).ready(function(){
$("#basic").click(function(){
        $("#more").slideToggle("slow");
  });
});


</script>

为了回显 -

    echo "

<div id='basic'>

<img src='/ctr/$pic'>
$name - $topic - $format - $mark - $price



<div id='more' style='display:none;'>
$description - $gender - $age - $reviewer
</div>

</div>
<hr>

";

我已经去掉了大部分格式以使其更清晰，并且我很高兴单击 div 可能不是显示更多数据的最佳方式。

我也尝试将 java 放入“echo”部分，但这再次意味着最高结果有效，但没有其他结果。

我猜我可能需要某种循环函数、使用 num_rows 指令进行更改或单独重命名每个 div 的方法，即 basic1、basic2、basic3，但我确信一定有一种更简单的方法来做到这一点。

非常感谢任何帮助或教程/其他已回答问题的链接。

Answer 1

我想这仅适用于第一个项目，因为当您应该为 div 使用类时，您正在使用 id。 ID 只能在页面上使用一次，而类可以多次使用。试试这个 jQuery：

$(document).ready(function(){
$(".basic").click(function(){
        // restrict selection to just the children of this (.basic div)
        $(".more", $(this)).slideToggle("slow");
  });
});

使用这个 php：

echo "
    <div class='basic'>
        <img src='/ctr/$pic'>
        $name - $topic - $format - $mark - $price
        <div class='more' style='display:none;'>
        $description - $gender - $age - $reviewer
        </div>
    </div>
    <hr>
";

Answer 2

只有最上面的结果有效，因为您使用 id 作为选择器，并且在 jquery 中仅返回一个结果（id 应该是唯一的），您可以这样做：

jquery

$(document).ready(function(){
$(".toggle").click(function(){
        $(this).find("#more").slideToggle("slow");
  });
});

php：

     echo "

<div class='toggle'>

<img src='/ctr/$pic'>
$name - $topic - $format - $mark - $price



<div id='more' style='display:none;'>
$description - $gender - $age - $reviewer
</div>

</div>
<hr>

";

通过这种方式，您将一个事件附加到一个类，每次您按下该 div，它会在其后代中查找 id=more 的 div - 这适用于页面上任意数量的 div，

请查看示例 http://jsbin.com/etawav/edit#preview