无法根据选择框中的选项值更改缩略图产品图像

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代码并且运行良好。

聚苯乙烯。我是JQuery的新手，我正在寻找可以复制的答案。但是，如果你给我的答案不能立即解决我的问题，我愿意学习。谢谢你们。

Answer 1

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

您可以使用单一更改侦听器执行此操作。 首先保持唯一ID和名称选择和图像相同。

例如：image name = img-swap_1并选择id = img-swap_1

on change event获取select的id并使用该id更改图像src。

＆＃13;

＆＃13;

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

＆＃13;

/* 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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;