jquery只适用于使用'回声& # 39;在PHP中 - jquery only works on top SQL search result when using ' echo ' in PHP

jquery only works on top SQL search result when using ' echo ' in PHP

本文关键字：PHP 回声适用于 jquery | 更新日期: 2023-09-27

我写了一个搜索代码，通过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 -

    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，但我确信必须有一个更简单的方法来做到这一点。

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

我想这只适用于第一项，因为当你应该为你的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>
";

只有顶部结果有效，因为你使用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