Javascript 基于php中的变量在jquery中重复函数

我在一个网页中有一组图像，每个图像都有自己的ID，所有ID都保存在一个php数组中。我想编写一个脚本，从php数组中获取ID并将其传递到客户端，然后对每个图像重复某个jquery函数。以下是我所做的：

<script>
    <? php for ($i = 0; $i < $counterPostID; $i++) {
        $str = "#post".$arrID[$i]; ?>
        var myvar = <? php echo json_encode($str); ?> ;
        var myvar2 = myvar + " " + "#textcaption";

        //functions to be repeated for each image
        jQuery(myvar).mouseover(function() {
            jQuery(myvar2).slideDown("slow");
        }).mouseout(function() {
            jQuery(myvar2).slideUp("slow");
        });

    <? php } ?>
</script>

代码运行良好，但仅适用于循环中的最后一次出现，我希望jQuery代码对所有图像重复。我该怎么做

您反复使用相同的ID：

#post1 #textcaption
#post2 #textcaption
       ^^^^^^^^^^^^--- here
etc..

ID在DOM文档中只能出现一次。由于ID必须是唯一的，jquery内部使用的document.getElementById基本上只返回一个DOM元素，而不会返回列表。这意味着找到的第一个id将被返回/处理

另外，您的代码将生成高度重复的JS。为什么不简单地将ID作为数组传递给JS，然后在该数组上循环呢？e、 g

<script>
   var IDs = <?php echo json_encode($arrID); ?>;
   $.each(IDs, function(idx, valu) {
      ... do your mouseover/mouseout stuff here ..
   });
</script>

---

这不起作用，因为你正在用每个循环覆盖你的变量。您可以将整个数组输出到javascript并在客户端循环，但不必这样做。我建议为您的帖子提供一个类，并为您的textcaption元素提供一个类，因为ID必须是唯一的，并且以类为目标：

jQuery('.post').mouseover(function () {
    jQuery(this).find('.textcaption').slideDown("slow");
}).mouseout(function () {
    jQuery(this).find('.textcaption').slideUp("slow");
});

假设$counterPostID是一个包含所有ID的数组，您可以将其内爆为选择器

var selector = '<?php echo "#post" . implode(", #post", $counterPostID); ?>';
// should output something like -> '#postid1, #postid2, #postid3' ... etc

$(selector).on('mouseenter mouseleave', function() {
    $('.textcaption', this).slideToggle('slow'); // use a class, not the same ID
});

---

你可以发布生成的HTML，这将有所帮助。您可以使用common类来实现这一点您是对的！common类是一个有效的解决方案工作良好，我没有注意到变量的覆盖。谢谢，做得很好。谢谢