我有一个照片库,我真的很想在悬停时用另一张图片更改每张图片。 我从数据库中动态获取图像(它实际上是一个图像矢量)
现在,我使用了一个 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>
然后你的 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; ?>
关于php - jquery 在悬停时更改图像(然后返回初始图像),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/6073446/