jquery更改div背景图片点击

我有10个小图片在整个屏幕的底部和一个主要图片。我试图实现的是将主要图片替换为10张小图片中的一张，当它们被点击时。jquery更改div背景图片点击

到目前为止的代码是：

$(function() { 
    $('#sp<?php echo $i; ?>').on { 
     'click', (function() { 
      $('#product-detail-pic').css('background-image', 'url(images/stock/<?php echo $stock[1][pic.$i]; ?>'); 
     }); 
    } 
);

和HTML/PHP是

<?php for($i=1;$i<6;$i++) { 
    if(($stock[1]['pic'.$i]!='')) { ?> 
     <div id="sp<?php echo $i; ?>" style="padding-right:13px; width:84px; height:61px; background:url(images/stock/<?php echo $stock[1]['pic'.$i]; ?>) no-repeat;float:left; background-size:84px 61px;"> 
      <img src="images/zoom.png" width="40" height="30" /> 
     </div>      
<?php }

来源

2014-02-21 user3337033

它不是一个复制粘贴错误，在你的函数右括号是错误的，它应该是'};'而不是'）;'。 – Nope

$（'＃sp <？php echo $ i;？>'）。{'click'，（function（）{如何设置$ i的值，必须有php循环来绑定全部点击动作10个小图像，如果我是你，我会使用课堂和绑定点击课程不是个人ID – Surace

我不建议这样做，因为您需要绑定每个缩略图上的事件处理程序，并且效率不高。如果您将缩略图ID放在HTML标记上，而不是绑定每个缩略图上的点击事件，则会更好。

你的PHP代码应该是这样的：

<?php 
for($i=1; $i<6; $i++) { 
    if($stock[1]['pic'.$i] != '') { ?> 
     <div data-img-url="<?php echo $stock[1]['pic'.$i] ?>" style="padding-right:13px; width:84px; height:61px; background:url(images/stock/<?php echo $stock[1]['pic'.$i]; ?>) no-repeat;float:left; background-size:84px 61px;"> 
      <img src="images/zoom.png" width="40" height="30" /> 
     </div> 
    } 
} 
?>

和您的jQuery的事件处理程序应该是这个样子：

$(function() { 
    $('[data-img-url]').on('click', function() { 
     $('#product-detail-pic').css('background-image', $(this).data('img-url')); 
    }); 
});

没有对JS侧PHP搞乱，更清洁，高效:)

我使用'[data-img-url]'作为jQuery选择器只是为了这个例子。在您的网站上，您应该使用与缩略图相关的选择器。

例如，如果您的缩略图被放置在与thumbnails ID的容器，那么你可以做：如果

$("#thumbnails").on('click', '[data-img-url]', function() { 
    $('#product-detail-pic').css('background-image', $(this).data('img-url')); 
});

来源

2014-02-21 15:30:12

优雅回答，现在如果我只能得到它的工作！当点击任何一个小缩略图时，我需要它将它的背景图像与页面上的主图像进行交换。我知道逻辑是正确的，只是现在的语法 – user3337033

其实上面的代码应该可以工作，如果你改变选择器，如果你的缩略图放在#thumbnails div中，那么上面的第二个例子应该可以工作，请更新图像路径，我忘记了放置图像/库存路径PHP代码:) –

我已经添加了一个fiddl e [link]（http://jsfiddle.net/Run57/）如果你能看到它出错的地方，那将会非常感谢:) – user3337033

你缺少在$stock[1][pic.$i] chnage这样qoutes，

$('#product-detail-pic').css('background-image','url(images/stock/<?php echo $stock[1]['pic'.$i]; ?>');

来源

2014-02-21 11:53:32

不好的剪切和粘贴，报价缺失和功能werent关闭正常修复所有，但仍然没有喜悦... – user3337033

与

尝试

var imgId = '<?php echo $stock[1]["pic".$i]; ?>'; 
$('#product-detail-pic').css('background-image','url(images/stock/'+imgId+')');

来源

2014-02-21 11:53:33 Gautam3164

jquery更改div背景图片点击

回答

相关问题