Question

我正在创建一个产品视图，其中一个较大的图像位于一行较小的图像上方。单击其中一个小图像时，大图像应该会改变（要点击任何小图像的src）。

我的HTML是：

＆＃13;

<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">

＆＃13;

我的jquery是：

＆＃13;

$(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')
	});
});

＆＃13;

如何让它按预期工作？

Answer 1

您的选择器不正确。您需要使用ID #选择器而不是类选择器.，因为元素包含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

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

单击另一个图像时，使用JQuery更改一个图像Src

3 个答案: