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

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/

我是新手，所以我不能post失败的图像。

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

我是新手，所以我不能post成功图片。

<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

这是你的作品 fiddle : https://jsfiddle.net/mxymj424/

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

例如：图像名称= img-swap_1 和 select id = img-swap_1

在更改事件中获取 select 的 ID 并使用该 ID 更改图像源。

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

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

Fail to change the thumbnail product image based on the options value in a select box

javascript

jquery

swap

options

twitter-bootstrap-3