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>

然后你的身体就会有第二部分（图片应该放在哪里）

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

Answer 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
    }
?>

Answer 3

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

如果是对象，nav 会给你留下很多相同的 id，这解释了你遇到的问题。

最有可能的是（我没有看到你的类...）id 存储在对象中的某个位置，因此你必须使用类似 $image[1]->id 而不是 <代码>$image[1]。

Answer 4

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

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

更新

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

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

Answer 5

如果您使用精灵而不是单独的图像，图像更改会更快，因为浏览器将所有精灵作为一张图像同时加载，然后您只需使用 jquery 更改背景位置即可。

Answer 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 添加 元素）