Question

我在屏幕底部有10张小图片和一张主图片。我想要实现的是在点击它们时将主图片替换为10张小图片中的一张。

到目前为止，

代码是：

$(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 }

Answer 1

$stock[1][pic.$i]中的引号错过了这样的更改

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

Answer 2

尝试

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

Answer 3

我不建议这样做，因为你需要在每个缩略图上绑定事件处理程序，这样做效率不高。如果您将缩略图ID放在HTML标记上而不是在每个缩略图上绑定click事件，那就更好了。

您的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' ) );
} );

jquery更改div的背景图片点击

3 个答案: