First, sorry for my poor English. I know you guys may think that this is a duplicate question but it is not.
My question is based on below question instead of copy：change the src value of an image based on the options value in a select box
I have tried all jQuery codes which were suggested by users on the above question but still not work for my thumbnail product.
Here is my jQuery code, it can run on only 1 thumbnail. If I used the same jQuery code for 2 thumbnails, the error appears. When I choose color, the right thumbnail image will synchronize with the left one. Here is my jsfiddle: https://jsfiddle.net/fw800cq7/21/
I am new so i cannot post the failed image.
<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>
Actually, I have used two different ids and jQuery codes to fix this issue. You can run it here: Here is my jsfiddle: https://jsfiddle.net/fw800cq7/24/
I am new so i cannot post the success image.
<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>
However, it seems so redundant. If I try to add a new thumbnail, I must repeat the code again in jQuery. The question is that: How to use only 1 id and 1 jQuery code for all thumbnails and work well.
Ps. I am very new in JQuery, I am looking for an answer can copy. However, I am willing to learn if you give me the answer which do not instantly fix my problem. Thank you guys.
here is your working fiddle : https://jsfiddle.net/mxymj424/
You can do this with single change listener. First keep unique id and name both select and image with same.
for example : image name= img-swap_1 and select id = img-swap_1
on change event get the id of select and use that id to change the image 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>