我有一个照片库，我真的很想用另一张图片更改悬停时的每一张图片。我从数据库中动态获取图像（它实际上是图像的向量）
现在，我使用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>
你不应该把你的脚本分成两部分吗？
你是 $（...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; ?>
您最好为替代方案提供一个键/值对象。
<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
}
?>
评论，某处似乎存在不匹配$image[1]这是一个整数，但根据您的代码，它是一个对象。
如果它是一个对象，nav<?php echo $image[1]; ?>会给你留下很多相同的id，这解释了你遇到的问题。
很可能（我还没有看到你的类......）id存储在对象的某个地方，所以你必须使用类似$image[1]->id而不是$image[1]的东西。
如果每个图像都有链接，则可以为每个图像指定一个类，并在悬停时循环访问它们。 下面是如何使用 3 张图像执行此操作的示例：
http://jsfiddle.net/briguy37/QSQ62/
更新
另外，这里有一个示例，您可以在其中直接使用 JQuery 更改背景图像，这样您就不必编写一堆 CSS 类定义。 您必须修改此设置以调用相应的图像 URL 以从数据库加载它们：
http://jsfiddle.net/briguy37/QSQ62/3/
如果您使用精灵而不是单独的图像，图像更改会更快，因为浏览器会同时加载所有图像，因此您可以使用 jquery 更改背景位置。
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>元素）