php - jquery 在悬停时更改图像(然后返回初始图像)

Question

我有一个照片库，我真的很想在悬停时用另一张图片更改每张图片。我从数据库中动态获取图像(它实际上是一个图像矢量)

现在，我使用了一个 jquery 插件，但它不起作用。它工作的唯一方法是，如果我静态放置 id(始终相同)，但它只会改变我任何具有单个特定图像的图像。我能做些什么？我有代码:

  <? foreach ($paginated_products as $product):?>
  <? $image =  $product->images->limit(2)->find_all();  ?>

     <script>

    $('img#nav<?php echo $image[1]; ?>').hover(function() {
$(this).attr("src","<?php echo $image[0]->url; ?>");
    }, function() {
$(this).attr("src","<?php echo $image[1]->url; ?>");
    });</script>
    //this way doesn;t work at all. if i put simply img#nav , it only changes me with a single image.

    <img src="<?= $image[1]->url; ?>" id ="nav<?php echo $image[1]; ?>"></img>

Answer 1

您不应该将脚本分成两部分吗？

您是 $(...).hover() 函数无法工作，因为 jquery 尚未初始化。

PS:你能不能展示生成的html的一部分。

第一个应该是:

<script>

$(document).ready(function() {
    <? foreach ($paginated_products as $product):?>
        <? $image =  $product->images->limit(2)->find_all();  ?>
        $('img#nav<?php echo $image[1]; ?>').hover(function() {
$(this).attr("src","<?php echo $image[0]->url; ?>");
    }, function() {
$(this).attr("src","<?php echo $image[1]->url; ?>");
    });
    <?php endforeach; ?>

});
</script>

然后你的 body 就会有第二部分(图片应该放在的地方)

<?php foreach ($paginated_products as $product):?>
    <?php $image =  $product->images->limit(2)->find_all();  ?>
    <img src="<?= $image[1]->url; ?>" id ="nav<?php echo $image[1]; ?>" />
<?php endforeach; ?>