當單擊另一個圖像時獲取一個圖像源與JQuery一起更改

Question

我正在用一個較大圖像上方的一個大圖像創建產品視圖。當點擊其中一個小圖像時（點擊任意小圖像的src），大圖像應該改變。

我的HTML是：

<img id="MainProductImage" src="Images/Product Images/AB04_GRAY_22A6_W_WEB.jpg"> 
 

 
<img id="sm001" src="Images/Product Images/AB04_G.jpg"> 
 
<img id="sm001" src="Images/Product Images/AB04.jpg"> 
 
<img id="sm002" src="Images/dB 002.jpeg"> 
 
<img id="sm003" src="Images/dB 003.jpeg"> 
 
<img id="sm004" src="Images/dB 004.jpeg">

我jQuery是：

$(document).ready(function() { 
 
\t $('img.sm001').click(function() { 
 
\t \t $('#MainProductImage').attr('src', 'Images/Product Images/AB04_G.jpg') 
 
\t }); 
 
\t 
 
\t $('img.sm002').click(function() { 
 
\t \t $('#MainProductImage').attr('src', 'Images/Product Images/AB04.jpg') 
 
\t }); 
 
\t 
 
\t $('img.sm003').click(function() { 
 
\t \t $('#MainProductImage').attr('src', 'Images/dB 002.jpeg') 
 
\t }); 
 
\t 
 
\t $('img.sm004').click(function() { 
 
\t \t $('#MainProductImage').attr('src', 'Images/dB 003.jpeg') 
 
\t }); 
 
\t 
 
\t $('img.sm005').click(function() { 
 
\t \t $('#MainProductImage').attr('src', 'Images/dB 004.jpeg') 
 
\t }); 
 
});

我怎樣才能得到這個像預期的那樣？

Answer 1

您有錯誤的選擇器。你需要爲元素有ID喜歡sm001改爲使用class選擇.的ID #選擇，sm002 .... sm005：

$('#sm001').click(function() { 
    $('#MainProductImage').attr('src', 'Images/Product Images/AB04_G.jpg') 
}); 
$('#sm002').click(function() { 
    $('#MainProductImage').attr('src', 'Images/Product Images/AB04.jpg') 
}); 

$('#sm003').click(function() { 
    $('#MainProductImage').attr('src', 'Images/dB 002.jpeg') 
}); 

$('#sm004').click(function() { 
    $('#MainProductImage').attr('src', 'Images/dB 003.jpeg') 
}); 

$('#sm005').click(function() { 
    $('#MainProductImage').attr('src', 'Images/dB 004.jpeg') 
}); 

你也可以縮小整個點擊事件代碼，以單一事件。

$('img[id^=sm00]').click(function() { 
    $('#MainProductImage').attr('src', $(this).attr('src')); 
}); 

Answer 2

你的目標使用img.sm001類錯誤的元素，儘量ID而不是#sm001等爲休息：

$('img#sm001') 

試試這個代碼：

$(function(){ 

    var main = $('#MainProductImage');//get the object once 

    //target is imag tag, where id starts with `sm00` 
    $('img[id^=sm00]').on('click', function(){ 
     main.prop('src', this.src); 
    }); 
}); 

Answer 3

請找到該代碼很少有變化正在工作

$(document).ready(function() { 
 
\t $('#sm001').click(function() { 
 
\t \t $('#MainProductImage').attr('src', 'grapes.jpeg') 
 
     alert($('#MainProductImage').attr('src')); 
 
\t }); 
 
\t 
 
\t $('#sm002').click(function() { 
 
\t \t $('#MainProductImage').attr('src', 'apple.jpeg') 
 
     alert($('#MainProductImage').attr('src')); 
 
\t }); 
 
\t 
 
\t $('#sm003').click(function() { 
 
\t \t $('#MainProductImage').attr('src', 'banana.jpeg') 
 
     alert($('#MainProductImage').attr('src')); 
 
\t }); 
 
\t 
 
\t $('#sm004').click(function() { 
 
\t \t $('#MainProductImage').attr('src', 'mango.jpeg') 
 
     alert($('#MainProductImage').attr('src')); 
 
\t }); 
 
\t 
 
\t $('#sm005').click(function() { 
 
\t \t $('#MainProductImage').attr('src', 'strawberry.jpeg') 
 
     alert($('#MainProductImage').attr('src')); 
 
\t }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<img id="MainProductImage" src="fruits.jpeg"> 
 

 
<img id="sm001" src="grapes.jpeg"> 
 
<img id="sm002" src="apple.jpeg"> 
 
<img id="sm003" src="banana.jpeg"> 
 
<img id="sm004" src="mango.jpeg"> 
 
<img id="sm005" src="strawberry.jpeg">

我希望它能幫助。請仔細閱讀以下JQuery selectors在理解的選擇幫助了我很多。