jquery在悬停时更改图像（然后回到初始图像）答案

【问题标题】：jquery change image on hover (and then come back to initial image)jquery在悬停时更改图像（然后回到初始图像）
【发布时间】：2011-05-20 14:34:34
【问题描述】：

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

现在，我使用了一个 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>

【问题讨论】：

$image[1]里面是什么，输出的html是什么？
一点建议。永远不要使用简短的 PHP 标签。始终使用完整的。
$image[1] 返回一个数字，例如 618

标签： php javascript jquery image hover

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

然后你的身体会有第二部分（图片应该去的地方）

<?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; ?>

【讨论】：

【解决方案2】：

您最好为替代方案提供一个键/值对象。

 <script>
    var altImages = {
<?php
    $images = array();
    foreach ($paginated_products as $product) {
        $cImage =  $product->images->limit(2)->find_all();
?>
                      "<?php echo $image[1]->url; ?>": "<?php echo $image[0]->url; ?>",
<?php
        $images[] = $cImage;
    }
?>
    };

    $(document).ready(function() {
        $('.switch-img').hover(function() {
            $(this).data('old-src', $(this).attr('src'));
            $(this).attr('src', altImages[$(this).attr('src')]);
        }, function() {
            $(this).attr('src', $(this).data('old-src'));
        });
    });
</script>

<?php
    foreach ($images as $cImage) {
?>
    <img src="<?php echo $cImage[1]->url; ?>" class="switch-img" />
<?php
    }
?>

【讨论】：

【解决方案3】：

似乎某处不匹配，根据您的评论，$image[1] 是一个整数，但根据您的代码，它是一个对象。

如果它是一个对象，nav<?php echo $image[1]; ?> 会给你留下很多相同的 id，这可以解释你遇到的问题。

很可能（我还没有看到您的课程...）id 存储在对象中的某个位置，因此您必须使用$image[1]->id 之类的东西而不是$image[1]。

【讨论】：

【解决方案4】：

如果每个图像都有一个链接，则可以为每个图像指定一个类，并在悬停时遍历它们。以下是如何使用 3 张图片执行此操作的示例：

http://jsfiddle.net/briguy37/QSQ62/

更新

另外，这里有一个示例，您可以直接使用 JQuery 更改背景图像，这样您就不必编写一堆 CSS 类定义。您必须修改它以调用适当的图像 URL 以从数据库中加载它们：

http://jsfiddle.net/briguy37/QSQ62/3/

【讨论】：

【解决方案5】：

如果您使用精灵而不是单独的图像，图像更改会更快，因为浏览器会同时加载所有这些精灵作为一个图像，那么您可以使用 jquery 更改背景位置。

【讨论】：

【解决方案6】：

jQuery(document).ready(function($) {
    $('<img src="//replace with php src call" id="//replace with php id call" onMouseOver="hoverImg()" onMouseOut="resetImg()"/>').insertAfter('//the element that the image will be place after in the HTML');
});

function hoverImg() {
    var name_element = $('//replace with image id from above');
    name_element.src = "//replace with hover image source";
}

function resetImg() {
    var name_element = $('//replace with image id from above');
    name_element.src = "//replace with original image source";
}

这是一种方法（除非您不想通过 jQuery 添加<img> 元素）

【讨论】：