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背景圖片點擊

回答

相關問題