如何使多个图像切换器在一个页面上工作?
这是我尝试过的，对于一个图像切换器效果很好。
注意:我想使用相同的图像缩略图和主图像。请听我的。:)
<head>
<style>
li img { height: 30px; border: 1px dashed blue;}
.main_image { border: 1px solid black; height: 500px; width: 500px; }
</style>
<script type="text/javascript">
$('li img').click( function() {
$('.main').attr('src', $(this).attr('src'));
});
</script>
</head>
<body>
<div id="image-switcher-001">
<div class="main_image">
<img class="main" src="" />
</div>
<ul>
<li>
<img src="http://placehold.it/200x300" alt="Image Name" />
</li>
<li>
<img src="http://placehold.it/300x400" alt="Image Name" />
</li>
</ul>
</div>
<div id="image-switcher-002">
<div class="main_image">
<img class="main" src="" />
</div>
<ul>
<li>
<img src="http://placehold.it/200x300" alt="Image Name" />
</li>
<li>
<img src="http://placehold.it/300x400" alt="Image Name" />
</li>
</ul>
</div>
</body>
您的问题是$('.main')部分选择所有 .main元素。
不要用$('.main')，试试$(this).closest('div').find('.main')。
在DOM树中向上到最近的<div/>，然后向下到其中的.main