javascript - 预览图像替换位于其他列表中的图像

Question

我在 <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>

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