单击另一张图片时，让一张图片 Src 更改为 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() {
 $('img.sm001').click(function() {
  $('#MainProductImage').attr('src', 'Images/Product Images/AB04_G.jpg')
 });
 
 $('img.sm002').click(function() {
  $('#MainProductImage').attr('src', 'Images/Product Images/AB04.jpg')
 });
 
 $('img.sm003').click(function() {
  $('#MainProductImage').attr('src', 'Images/dB 002.jpeg')
 });
 
 $('img.sm004').click(function() {
  $('#MainProductImage').attr('src', 'Images/dB 003.jpeg')
 });
 
 $('img.sm005').click(function() {
  $('#MainProductImage').attr('src', 'Images/dB 004.jpeg')
 });
});

我怎样才能让它按预期工作？

Answer 1

您的选择器不正确。你需要使用 id # 选择器而不是 class 选择器 . 因为元素有像 sm001,sm002...sm005 这样的 id：

$('#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

您使用 class 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() {
 $('#sm001').click(function() {
  $('#MainProductImage').attr('src', 'grapes.jpeg')
        alert($('#MainProductImage').attr('src'));
 });
 
 $('#sm002').click(function() {
  $('#MainProductImage').attr('src', 'apple.jpeg')
         alert($('#MainProductImage').attr('src'));
 });
 
 $('#sm003').click(function() {
  $('#MainProductImage').attr('src', 'banana.jpeg')
         alert($('#MainProductImage').attr('src'));
 });
 
 $('#sm004').click(function() {
  $('#MainProductImage').attr('src', 'mango.jpeg')
         alert($('#MainProductImage').attr('src'));
 });
 
 $('#sm005').click(function() {
  $('#MainProductImage').attr('src', 'strawberry.jpeg')
         alert($('#MainProductImage').attr('src'));
 });
});

<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，这对我理解选择有很大帮助。

单击另一张图片时，让一张图片 Src 更改为 JQuery

Getting One Image Src to Change with JQuery when Another Image is Clicked

jquery

image

src