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<?php echo $image[1]; ?>将为您留下许多相同的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(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>元素）

Answer 6

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

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

6 个答案: