首先，抱歉我的英语不好。我知道你们可能会认为这是一个重复的问题，但事实并非如此。
我的问题基于以下问题，而不是副本：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代码并且运行良好。
聚苯乙烯。我是JQuery的新手，我正在寻找可以复制的答案。但是，如果你给我的答案不能立即解决我的问题，我愿意学习。谢谢你们。
答案 0 :(得分：0)
这是你的工作小提琴：https://jsfiddle.net/mxymj424/
您可以使用单一更改侦听器执行此操作。 首先保持唯一ID和名称选择和图像相同。
例如：image name = img-swap_1并选择id = img-swap_1
on change event获取select的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;
padding: 0px;
}
.text-blk .carousel-control {
width:0%;
}
.text-blk .carousel-control.left {
left: -5px;
}
.text-blk .carousel-control.right {
right: -5px;
}
/* Reposition the controls slightly */
/*3粒點*/
/* Changes the position of the indicators */
.text-blk .carousel-indicators {
right: 50%;
top: auto;
bottom: -20px;
margin-right: -20px;
font-size:30px;
}
/* Changes the colour of the indicators */
.text-blk .carousel-indicators .active {
background: #00C851;
}
.text-blk .carousel-indicators li {
background: #ffbb33;
}
.carousel-control .glyphicon-chevron-left , .glyphicon-chevron-right{
color:#000;
}
/*My setting*/
.carousel-inner img {
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 {
outline:1px solid #4bc6ff;
}
.item .title {
font-size:18px;
color:#31708f;
margin:0px 0px 2px 0px ;
font-weight:bold;
}
.item .cm {
font-size:12px;
margin:0px 0px 5px 0px ;
font-weight:none;
color: #757575;
}
.item .form-inline {
margin:0px 0px 5px 0px ;
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 {
float:right;
}
.item .left {
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>