我在<ul>中有两个列表，每个列表包含一个主图像以及一个容纳其他较小预览图像的容器，这些较小的预览图像将在单击后取代主图像。除了以下几点，它几乎可以正常工作：
由于我在<li>中有两个主列表<UL>，因此一个列表上的图像替换了第二个<li>上的图像。
为什么会这样？
function exp(el){
el.classList.toggle('on');
}
var mainImage = $(".mainimg");
$(".preview img").click(function(){
var src = $(this).attr("src");
$(".mainimg").attr("src",src);
});/*Main list*/
#list ul{width:100%; height:100%; border-radius:0px; list-style-type:none; margin:5% 0% 0% 0%; overflow:hidden; padding:0% 0% 4% 0%; }
#list li{border-radius:10px; border:1px solid black; color:black; background:white; width:100%; height:auto; display:block; text-decoration:none; font-weight:bold; font-size:0.9vw; margin:0% 0% 5% 0%; overflow:hidden; word-wrap:break-all; word-break:break-word; padding:0% 0% 0% 0%; float:left; text-align:center; line-height:1.2; }
/* main image */
#list .mainimg{width:20vw; height:auto; border:2px solid black; float:left; margin:1% 0% 0% 1%; overflow:hidden; border-radius:10px; background:rgba(0,0,0,0.1); padding:0%; transition:0.2s ease-in-out;}
#list .open.on ~ .mainimg{width:70vw; height:auto; float:left; margin:1% 0% 0% 0%; overflow:hidden; border-radius:0px; background:rgba(30,30,30,1); padding:2% 15% 2% 15%;; transition:0.3s ease-in-out;}
/*images expanded */
#list .imgxp{
width:100%; height:0px; background:rgba(0,0,0,1); margin:0% 0% 0% 0%; float:left; overflow:auto; }
#list .xp.on ~ .imgxp{
width:100%; height:auto; margin:0% 0% 0% 0%; float:left; padding:0% 0% 3% 0%;}
/*image expander button*/
#list button{background:rgba(0,0,0,1); color:white; width:20%; height:auto; padding:0.5% 1% 0.5% 1%; margin:0% 60% 0% 1.2%; float:left; border-radius:10px; overflow:hidden; }
/*Preview gallery*/
#list .preview{width:7vw; height:5.5vw; float:left; margin:3% 3.5% 4% 3.2%; }
#list .preview img{width:10vw; height:8.5vw; float:left; opacity:0.7; transition:0.2s; border-radius:10px; border:1px solid rgba(0,0,0,0.5);}
#list video{width:60vw; height:40vw; float:left; border-radius:10px; position:relative; top:5vw; left:20vw; background:rgba(0,0,0,0.5); margin:5% 20% 5% 0%;}
#list .preview img:hover{opacity:1; }<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id = "list">
<li>
<img class='mainimg' src="https://cdn.pixabay.com/photo/2018/08/06/16/30/mushroom-3587888_960_720.jpg" /> <button class="xp" onclick="exp(this)">See more</button>
<div class="imgxp">
<div class="preview"><img src="https://cdn.pixabay.com/photo/2018/08/06/16/30/mushroom-3587888_960_720.jpg"/></div>
<div class="preview"><img src="https://cdn.pixabay.com/photo/2013/04/03/12/05/tree-99852_960_720.jpg"/></div>
<div class="preview"><img src="https://cdn.pixabay.com/photo/2013/11/28/10/36/road-220058_960_720.jpg"/></div>
<div class="preview"><img src="https://cdn.pixabay.com/photo/2015/03/26/09/47/sky-690293_960_720.jpg"/></div>
<div class="preview"><img src="https://cdn.pixabay.com/photo/2012/03/01/00/21/bridge-19513_960_720.jpg"/></div>
</div>
</li>
<li>
<img class='mainimg' src="https://cdn.pixabay.com/photo/2013/11/28/10/03/autumn-219972_960_720.jpg" /> <button class="xp" onclick="exp(this)"> See more</button>
<div class="imgxp">
<div class="preview"><img src="https://cdn.pixabay.com/photo/2013/11/28/10/03/autumn-219972_960_720.jpg"/></div>
<div class="preview"><img src="https://cdn.pixabay.com/photo/2015/12/01/20/28/road-1072823_960_720.jpg"/></div>
<div class="preview"><img src="https://cdn.pixabay.com/photo/2015/12/01/20/28/green-1072828_960_720.jpg"/></div>
<div class="preview"><img src="https://cdn.pixabay.com/photo/2015/02/24/15/41/dog-647528_960_720.jpg"/></div>
<div class="preview"><img src="https://cdn.pixabay.com/photo/2016/01/19/17/39/starry-night-1149815_960_720.jpg"/></div>
</div>
</li>
</div>
答案 0 :(得分：1)
您应该以与点击相关的方式找到主图像，否则最终将选择页面上.mainimg的所有实例。在这种情况下，.parent将是li标记。
$(this).parent().find(".mainimg").attr("src",src);
答案 1 :(得分：1)
由于存在两个具有相同类的列表，即。 mainimg，您必须指定目标div的src。 使用jquery可以遍历onclick事件的div
$(this).parent().parent().parent().children(':first-child').attr("src",src);
function exp(el){
el.classList.toggle('on');
}
var mainImage = $(".mainimg");
$(".preview img").click(function(){
var src = $(this).attr("src");
$(this).parent().parent().parent().children(':first-child').attr("src",src);
});/*Main list*/
#list ul{width:100%; height:100%; border-radius:0px; list-style-type:none; margin:5% 0% 0% 0%; overflow:hidden; padding:0% 0% 4% 0%; }
#list li{border-radius:10px; border:1px solid black; color:black; background:white; width:100%; height:auto; display:block; text-decoration:none; font-weight:bold; font-size:0.9vw; margin:0% 0% 5% 0%; overflow:hidden; word-wrap:break-all; word-break:break-word; padding:0% 0% 0% 0%; float:left; text-align:center; line-height:1.2; }
/* main image */
#list .mainimg{width:20vw; height:auto; border:2px solid black; float:left; margin:1% 0% 0% 1%; overflow:hidden; border-radius:10px; background:rgba(0,0,0,0.1); padding:0%; transition:0.2s ease-in-out;}
#list .open.on ~ .mainimg{width:70vw; height:auto; float:left; margin:1% 0% 0% 0%; overflow:hidden; border-radius:0px; background:rgba(30,30,30,1); padding:2% 15% 2% 15%;; transition:0.3s ease-in-out;}
/*images expanded */
#list .imgxp{
width:100%; height:0px; background:rgba(0,0,0,1); margin:0% 0% 0% 0%; float:left; overflow:auto; }
#list .xp.on ~ .imgxp{
width:100%; height:auto; margin:0% 0% 0% 0%; float:left; padding:0% 0% 3% 0%;}
/*image expander button*/
#list button{background:rgba(0,0,0,1); color:white; width:20%; height:auto; padding:0.5% 1% 0.5% 1%; margin:0% 60% 0% 1.2%; float:left; border-radius:10px; overflow:hidden; }
/*Preview gallery*/
#list .preview{width:7vw; height:5.5vw; float:left; margin:3% 3.5% 4% 3.2%; }
#list .preview img{width:10vw; height:8.5vw; float:left; opacity:0.7; transition:0.2s; border-radius:10px; border:1px solid rgba(0,0,0,0.5);}
#list video{width:60vw; height:40vw; float:left; border-radius:10px; position:relative; top:5vw; left:20vw; background:rgba(0,0,0,0.5); margin:5% 20% 5% 0%;}
#list .preview img:hover{opacity:1; }<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id = "list">
<li>
<img class='mainimg' src="https://cdn.pixabay.com/photo/2018/08/06/16/30/mushroom-3587888_960_720.jpg" /> <button class="xp" onclick="exp(this)">See more</button>
<div class="imgxp">
<div class="preview"><img src="https://cdn.pixabay.com/photo/2018/08/06/16/30/mushroom-3587888_960_720.jpg"/></div>
<div class="preview"><img src="https://cdn.pixabay.com/photo/2013/04/03/12/05/tree-99852_960_720.jpg"/></div>
<div class="preview"><img src="https://cdn.pixabay.com/photo/2013/11/28/10/36/road-220058_960_720.jpg"/></div>
<div class="preview"><img src="https://cdn.pixabay.com/photo/2015/03/26/09/47/sky-690293_960_720.jpg"/></div>
<div class="preview"><img src="https://cdn.pixabay.com/photo/2012/03/01/00/21/bridge-19513_960_720.jpg"/></div>
</div>
</li>
<li>
<img class='mainimg' src="https://cdn.pixabay.com/photo/2013/11/28/10/03/autumn-219972_960_720.jpg" /> <button class="xp" onclick="exp(this)"> See more</button>
<div class="imgxp">
<div class="preview"><img src="https://cdn.pixabay.com/photo/2013/11/28/10/03/autumn-219972_960_720.jpg"/></div>
<div class="preview"><img src="https://cdn.pixabay.com/photo/2015/12/01/20/28/road-1072823_960_720.jpg"/></div>
<div class="preview"><img src="https://cdn.pixabay.com/photo/2015/12/01/20/28/green-1072828_960_720.jpg"/></div>
<div class="preview"><img src="https://cdn.pixabay.com/photo/2015/02/24/15/41/dog-647528_960_720.jpg"/></div>
<div class="preview"><img src="https://cdn.pixabay.com/photo/2016/01/19/17/39/starry-night-1149815_960_720.jpg"/></div>
</div>
</li>
</div>