未能根据选项框中的选项值更改缩略图产品图像

Question

首先，对我差劲的英语感到抱歉。我知道你们可能会认为这是一个重复的问题，但事实并非如此。

我的问题是基于以下问题，而不是副本：change the src value of an image based on the options value in a select box

我已经试过这表明了用户对上述问题，但仍然不是我的缩略图产品工作的所有的jQuery代码。

这是我的jQuery代码，它只能运行在1个缩略图上。如果我为2个缩略图使用相同的jQuery代码，则会显示错误。当我选择颜色时，右侧的缩略图图像将与左侧的图像同步。这里是我的jsfiddle：https://jsfiddle.net/fw800cq7/21/

我是新的，所以我不能发布失败的图像。

<div class="row"> 
    <div class="col-md-12"> 
    <div id="myCarousel" class="carousel slide"> 


     <ol class="carousel-indicators"> 
     <li data-target="#myCarousel" data-slide-to="0" class="active"></li> 
     <li data-target="#myCarousel" data-slide-to="1"></li> 
     <li data-target="#myCarousel" data-slide-to="2"></li> 
     <li data-target="#myCarousel" data-slide-to="3"></li> 
     </ol> 

     <!-- Carousel items --> 
     <div class="carousel-inner"> 
     <!-- 1-2 --> 
     <!-- 1 --> 
     <div class="item active">    
      <div class="row"> <!--1 & 2 thumbnain--> 
      <div class="col-md-6"> <!--1 thumbnail--> 
       <div class="thumbnail"><a href=""><img src="http://via.placeholder.com/500x500" name="img-swap" alt="Image"></a> 
       <div class="caption"> 
        <p class="title">Product</p> 
        <p class="cm">Comment</p> 
       </div> 

       <div class="row"> <!--two forms row--> 
        <div class="col-md-12"> 
        <form class="form-inline"> 
         <div class="form-group"> 
         <label for="">Size</label> 
         <select class="form-control input-xs"> 
          <option>M</option> 
          <option>L</option> 
          <option>XL</option>       
         </select> 
         <label for="">Color</label>      
         <select class="form-control input-xs" name="img-swap" id="img-swap"> 
          <option value="http://via.placeholder.com/500x500">Black</option> 
          <option value="http://via.placeholder.com/400x400">White</option> 
          <option value="http://via.placeholder.com/300x300">Grey</option> 
          <option value="http://via.placeholder.com/200x200">Navy</option> 
          <option value="http://via.placeholder.com/100x100">Wine</option> 
         </select>    
         </div> 
        </form> 
        </div><!--col-md-12--> 
        </div> 

        <hr class="divider"> 

        <div class="row"> 
         <div class="col-md-6"> 
         <p class="price">Price</p> 
         </div> 
         <div class="col-md-6"> 
         <a href="#" class="btn btn-info btn-sm right" role="button">Add to Car<span class="glyphicon glyphicon-shopping-cart" aria-hidden="true"></span></a> 
         </div> 
        </div><!--row-->   
        </div> <!--thumbnail--> 
       </div> <!-- 1 --> 

       <!-- 2 --> 
       <div class="col-md-6"> <!--2 thumbnail--> 
        <div class="thumbnail"><a href=""><img src="http://via.placeholder.com/100x100" name="img-swap" alt="Image"></a> 
        <div class="caption"> 
         <p class="title">Price</p> 
         <p class="cm">Comment</p> 
        </div> 

        <div class="row"> <!--two forms row--> 
         <div class="col-md-12"> 
         <form class="form-inline"> 
          <div class="form-group"> 
          <label for="">Size</label> 
          <select class="form-control input-xs"> 
           <option>M</option> 
           <option>L</option>s 
           <option>XL</option>       
          </select> 
          <label for="">Color</label>      
          <select class="form-control input-xs" name="img-swap" id="im-swap"> 
           <option value="http://via.placeholder.com/400x400">Black</option> 
           <option value="http://via.placeholder.com/300x300">White</option> 
           <option value="http://via.placeholder.com/200x200">Grey</option> 
           <option value="http://via.placeholder.com/100x100">Navy</option> 
          </select>    
          </div> 
         </form> 
         </div><!--col-md-12--> 
         </div> 

         <hr class="divider"> 

         <div class="row"> 
          <div class="col-md-6"> 
          <p class="price">sss</p> 
          </div> 
          <div class="col-md-6"> 
          <a href="#" class="btn btn-info btn-sm right" role="button">Add to Car<span class="glyphicon glyphicon-shopping-cart" aria-hidden="true"></span></a> 
          </div> 
         </div><!--row-->   
         </div> <!--thumbnail--> 
        </div> <!-- 2 --> 
       </div><!--1 & 2 thumbnail --> 
      </div><!--/item--> 

</div><!--/carousel-inner--> 

<a class="carousel-control left" href="#myCarousel" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a> 
<a class="carousel-control right" href="#myCarousel" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a> 

</div><!--/myCarousel--> 
</div> 
</div> 

其实，我用了两个不同的id和jQuery代码来解决这个问题。 你可以在这里运行：这是我的jsfiddle：https://jsfiddle.net/fw800cq7/24/

我是新的，所以我不能发布成功的形象。

<div class="row"> 
    <div class="col-md-12"> 
    <div id="myCarousel" class="carousel slide"> 


     <ol class="carousel-indicators"> 
     <li data-target="#myCarousel" data-slide-to="0" class="active"></li> 
     <li data-target="#myCarousel" data-slide-to="1"></li> 
     <li data-target="#myCarousel" data-slide-to="2"></li> 
     <li data-target="#myCarousel" data-slide-to="3"></li> 
     </ol> 

     <!-- Carousel items --> 
     <div class="carousel-inner"> 
     <!-- 1-2 --> 
     <!-- 1 --> 
     <div class="item active">    
      <div class="row"> <!--1 & 2 thumbnain--> 
      <div class="col-md-6"> <!--1 thumbnail--> 
       <div class="thumbnail"><a href=""><img src="http://via.placeholder.com/500x500" name="img-swap" alt="Image"></a> 
       <div class="caption"> 
        <p class="title">Product</p> 
        <p class="cm">Comment</p> 
       </div> 

       <div class="row"> <!--two forms row--> 
        <div class="col-md-12"> 
        <form class="form-inline"> 
         <div class="form-group"> 
         <label for="">Size</label> 
         <select class="form-control input-xs"> 
          <option>M</option> 
          <option>L</option> 
          <option>XL</option>       
         </select> 
         <label for="">Color</label>      
         <select class="form-control input-xs" name="img-swap" id="img-swap"> 
          <option value="http://via.placeholder.com/500x500">Black</option> 
          <option value="http://via.placeholder.com/400x400">White</option> 
          <option value="http://via.placeholder.com/300x300">Grey</option> 
          <option value="http://via.placeholder.com/200x200">Navy</option> 
          <option value="http://via.placeholder.com/100x100">Wine</option> 
         </select>    
         </div> 
        </form> 
        </div><!--col-md-12--> 
        </div> 

        <hr class="divider"> 

        <div class="row"> 
         <div class="col-md-6"> 
         <p class="price">Price</p> 
         </div> 
         <div class="col-md-6"> 
         <a href="#" class="btn btn-info btn-sm right" role="button">Add to Car<span class="glyphicon glyphicon-shopping-cart" aria-hidden="true"></span></a> 
         </div> 
        </div><!--row-->   
        </div> <!--thumbnail--> 
       </div> <!-- 1 --> 

       <!-- 2 --> 
       <div class="col-md-6"> <!--2 thumbnail--> 
        <div class="thumbnail"><a href=""><img src="http://via.placeholder.com/100x100" name="img-swap1" alt="Image"></a> 
        <div class="caption"> 
         <p class="title">Price</p> 
         <p class="cm">Comment</p> 
        </div> 

        <div class="row"> <!--two forms row--> 
         <div class="col-md-12"> 
         <form class="form-inline"> 
          <div class="form-group"> 
          <label for="">Size</label> 
          <select class="form-control input-xs"> 
           <option>M</option> 
           <option>L</option>s 
           <option>XL</option>       
          </select> 
          <label for="">Color</label>      
          <select class="form-control input-xs" name="img-swap1" id="img-swap1"> 
           <option value="http://via.placeholder.com/400x400">Black</option> 
           <option value="http://via.placeholder.com/300x300">White</option> 
           <option value="http://via.placeholder.com/200x200">Grey</option> 
           <option value="http://via.placeholder.com/100x100">Navy</option> 
          </select>    
          </div> 
         </form> 
         </div><!--col-md-12--> 
         </div> 

         <hr class="divider"> 

         <div class="row"> 
          <div class="col-md-6"> 
          <p class="price">sss</p> 
          </div> 
          <div class="col-md-6"> 
          <a href="#" class="btn btn-info btn-sm right" role="button">Add to Car<span class="glyphicon glyphicon-shopping-cart" aria-hidden="true"></span></a> 
          </div> 
         </div><!--row-->   
         </div> <!--thumbnail--> 
        </div> <!-- 2 --> 
       </div><!--1 & 2 thumbnail --> 
      </div><!--/item--> 

</div><!--/carousel-inner--> 

<a class="carousel-control left" href="#myCarousel" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a> 
<a class="carousel-control right" href="#myCarousel" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a> 

</div><!--/myCarousel--> 
</div> 
</div> 

但是，它似乎是多余的。如果我尝试添加新的缩略图，我必须在jQuery中再次重复该代码。问题是：如何仅为所有缩略图使用1个id和1个jQuery代码并且运行良好。

Ps。我在JQuery中很新，我正在寻找一个可以复制的答案。但是，如果你给我的答案不能立即解决我的问题，我愿意学习。感谢你们。

Answer 1

这里是你的工作提琴：https://jsfiddle.net/mxymj424/

您可以用单更改侦听做到这一点。 首先保留唯一的ID并将其同名。

例如：图像名称= IMG-swap_1和选择ID =上改变事件IMG-swap_1

得到的选择ID，并使用该ID来改变图片src。

$(document).ready(function(){ 
 
    $(".color-select").change(function(){ 
 
    var id=this.id; 
 
    $("img[name="+id+"]").attr("src",$(this).val());  
 
    }); 
 
});

/* Removes the default 20px margin and creates some padding space for the indicators and controls */ 
 
.text-blk .carousel { 
 
    margin-bottom: 10px; 
 
\t padding: 0px; 
 
} 
 

 
.text-blk .carousel-control { 
 
\t width:0%; 
 
} 
 

 
.text-blk .carousel-control.left { 
 
\t left: -5px; 
 
} 
 

 
.text-blk .carousel-control.right { 
 
\t right: -5px; 
 
} 
 

 
/* Reposition the controls slightly */ 
 

 
/*3粒點*/ 
 
/* Changes the position of the indicators */ 
 
.text-blk .carousel-indicators { 
 
\t right: 50%; 
 
\t top: auto; 
 
\t bottom: -20px; 
 
\t margin-right: -20px; 
 
\t font-size:30px; 
 
} 
 

 
/* Changes the colour of the indicators */ 
 

 
.text-blk .carousel-indicators .active { 
 
background: #00C851; 
 
} 
 

 
.text-blk .carousel-indicators li { 
 
\t background: #ffbb33; 
 
} 
 

 

 
.carousel-control .glyphicon-chevron-left , .glyphicon-chevron-right{ 
 
\t color:#000; 
 
} 
 

 

 
/*My setting*/ 
 
.carousel-inner img { 
 
\t height:100%; 
 
    width:100%; 
 
} 
 

 
.item .thumbnail .caption { 
 
    padding: 2px; 
 
    color: #333; 
 
} 
 

 
.item .thumbnail:hover, 
 
.thumbnail:focus, 
 
.thumbnail.active { 
 
    border-color: #4bc6ff; 
 
} 
 

 
.item .thumbnail img:hover { 
 
\t outline:1px solid #4bc6ff; 
 
} 
 

 

 

 
.item .title { 
 
\t font-size:18px; 
 
\t color:#31708f; 
 
\t margin:0px 0px 2px 0px ; 
 
\t font-weight:bold; 
 
} 
 

 
.item .cm { 
 
\t font-size:12px; 
 
\t margin:0px 0px 5px 0px ; 
 
\t font-weight:none; 
 
\t color: #757575; 
 
} 
 

 
.item .form-inline { 
 
\t margin:0px 0px 5px 0px ; 
 
\t font-weight:none; 
 
} 
 

 
.item .divider { 
 
    height: 1px; 
 
    margin:0px 0px 5px 0px; /*上右下左*/ 
 
    overflow: hidden; 
 
    background-color: #e5e5e5; 
 
} 
 

 

 
.item .price { 
 
    font-size: 15px; 
 
    margin: 2px 2px 2px 2px ; 
 
    color: #000; 
 
    font-weight:bold; 
 
} 
 

 
.item .right { 
 
\t float:right; 
 
} 
 

 
.item .left { 
 
\t float:left; 
 
}

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="row"> 
 
    <div class="col-md-12"> 
 
    <div id="myCarousel" class="carousel slide"> 
 

 

 
     <ol class="carousel-indicators"> 
 
     <li data-target="#myCarousel" data-slide-to="0" class="active"></li> 
 
     <li data-target="#myCarousel" data-slide-to="1"></li> 
 
     <li data-target="#myCarousel" data-slide-to="2"></li> 
 
     <li data-target="#myCarousel" data-slide-to="3"></li> 
 
     </ol> 
 

 
     <!-- Carousel items --> 
 
     <div class="carousel-inner"> 
 
     <!-- 1-2 --> 
 
     <!-- 1 --> 
 
     <div class="item active">    
 
      <div class="row"> <!--1 & 2 thumbnain--> 
 
      <div class="col-md-6"> <!--1 thumbnail--> 
 
       <div class="thumbnail"><a href=""><img src="http://via.placeholder.com/500x500" name="img-swap_1" alt="Image"></a> 
 
       <div class="caption"> 
 
        <p class="title">Product</p> 
 
        <p class="cm">Comment</p> 
 
       </div> 
 

 
       <div class="row"> <!--two forms row--> 
 
        <div class="col-md-12"> 
 
        <form class="form-inline"> 
 
         <div class="form-group"> 
 
         <label for="">Size</label> 
 
         <select class="form-control input-xs"> 
 
          <option>M</option> 
 
          <option>L</option> 
 
          <option>XL</option>       
 
         </select> 
 
         <label for="">Color</label>      
 
         <select class="form-control input-xs color-select" name="img-swap" id="img-swap_1"> 
 
          <option value="http://via.placeholder.com/500x500">Black</option> 
 
          <option value="http://via.placeholder.com/400x400">White</option> 
 
          <option value="http://via.placeholder.com/300x300">Grey</option> 
 
          <option value="http://via.placeholder.com/200x200">Navy</option> 
 
          <option value="http://via.placeholder.com/100x100">Wine</option> 
 
         </select>    
 
         </div> 
 
        </form> 
 
        </div><!--col-md-12--> 
 
        </div> 
 

 
        <hr class="divider"> 
 

 
        <div class="row"> 
 
         <div class="col-md-6"> 
 
         <p class="price">Price</p> 
 
         </div> 
 
         <div class="col-md-6"> 
 
         <a href="#" class="btn btn-info btn-sm right" role="button">Add to Car<span class="glyphicon glyphicon-shopping-cart" aria-hidden="true"></span></a> 
 
         </div> 
 
        </div><!--row-->   
 
        </div> <!--thumbnail--> 
 
       </div> <!-- 1 --> 
 

 
       <!-- 2 --> 
 
       <div class="col-md-6"> <!--2 thumbnail--> 
 
        <div class="thumbnail"><a href=""><img src="http://via.placeholder.com/100x100" name="img-swap_2" alt="Image"></a> 
 
        <div class="caption"> 
 
         <p class="title">Price</p> 
 
         <p class="cm">Comment</p> 
 
        </div> 
 

 
        <div class="row"> <!--two forms row--> 
 
         <div class="col-md-12"> 
 
         <form class="form-inline"> 
 
          <div class="form-group"> 
 
          <label for="">Size</label> 
 
          <select class="form-control input-xs"> 
 
           <option>M</option> 
 
           <option>L</option>s 
 
           <option>XL</option>       
 
          </select> 
 
          <label for="">Color</label>      
 
          <select class="form-control input-xs color-select" name="img-swap1" id="img-swap_2"> 
 
           <option value="http://via.placeholder.com/400x400">Black</option> 
 
           <option value="http://via.placeholder.com/300x300">White</option> 
 
           <option value="http://via.placeholder.com/200x200">Grey</option> 
 
           <option value="http://via.placeholder.com/100x100">Navy</option> 
 
          </select>    
 
          </div> 
 
         </form> 
 
         </div><!--col-md-12--> 
 
         </div> 
 

 
         <hr class="divider"> 
 

 
         <div class="row"> 
 
          <div class="col-md-6"> 
 
          <p class="price">sss</p> 
 
          </div> 
 
          <div class="col-md-6"> 
 
          <a href="#" class="btn btn-info btn-sm right" role="button">Add to Car<span class="glyphicon glyphicon-shopping-cart" aria-hidden="true"></span></a> 
 
          </div> 
 
         </div><!--row-->   
 
         </div> <!--thumbnail--> 
 
        </div> <!-- 2 --> 
 
       </div><!--1 & 2 thumbnail --> 
 
      </div><!--/item--> 
 

 
</div><!--/carousel-inner--> 
 

 
<a class="carousel-control left" href="#myCarousel" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a> 
 
<a class="carousel-control right" href="#myCarousel" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a> 
 

 
</div><!--/myCarousel--> 
 
</div> 
 
</div>