Question

试图弄清楚如何从几个小样本图像中更改产品上的主图像。主要产品由正面和背面两部分组成，并希望主图像显示两者的组合。

例如：

<img id="main-image">

<div id="front">
<img src="/red_thumb.jpg">
<img src="/green_thumb.jpg>
</div>

<div id="back">
<img src="/blue_thumb.jpg">
<img src="/black_thumb.jpg">
</div>

然后当您从#front选择绿色并从#back选择蓝色时，它会将#main-image src的URL更改为“/green-blue.jpg”

我可以使用选择下拉菜单，但更喜欢列表或图像，所以我可以做一些可以选择的小样本图像。我需要一个由图像点击隐藏和控制的选择吗？

思想？

Answer 1

您可以尝试以下代码开始。以下解决方案的重点是让您意识到可以使用 jquery.data 来完成此任务。如果您需要更多信息，请告诉我。

我还建议您阅读以下文档。 jQuery Data

<img id="main-image">

<div id="front">
<img src="/red_thumb.jpg" data-image-path="IMAGE_PATH" class="img-thumb">
<img src="/green_thumb.jpg"  data-image-path="IMAGE_PATH" class="img-thumb">
</div>

<div id="back">
<img src="/blue_thumb.jpg"  data-image-path="IMAGE_PATH" class="img-thumb">
<img src="/black_thumb.jpg"  data-image-path="IMAGE_PATH" class="img-thumb">
</div>


<script type="text/javascript">
$(function(){
 $(".img-thumb").click(function(){
     var imgPath = $(this).data("image-path");
     $(".main-image").attr("src",imgPath);
  });

});
</script>

Answer 2

对于＆＃34;数据＆＃34>来说，这是一个绝佳的机会。属性。试试这个：

<强> HTML

<img id="main-image">

<div id="front">
<img src="http://vignette1.wikia.nocookie.net/phobia/images/5/5a/Red.jpg/revision/latest?cb=20161109225243" data-color="red" data-side="front" class="img-thumb">
<img src="http://i.imgur.com/eucAMTA.jpg" data-color="green" data-side="front" class="img-thumb">
</div>

<div id="back">
<img src="http://www.drodd.com/images14/blue22.jpg" data-color="blue" data-side="back" class="img-thumb">
<img src="http://www.solidbackgrounds.com/images/2560x1440/2560x1440-black-solid-color-background.jpg" data-color="black" data-side="back" class="img-thumb">
</div>

<强>的Javascript

var backcolor = "";
var frontcolor = "";
$(document).ready(function() {
  $('img.img-thumb').click(function() {
    if ($(this).data('side') && $(this).data('color')) {
      if ($(this).data('side') == "front") {
        frontcolor = $(this).data('color');
      } else {
        backcolor = $(this).data('color');
      }
    }
    if (backcolor && frontcolor) {
      var imgUrl = "/" + frontcolor + "-" + backcolor + ".jpg";
      $('#main-image').attr("src", "/" + backcolor + "_" + frontcolor + ".jpg");
    }
  });
});

jsFiddle：https://jsfiddle.net/mspinks/xqnq2cgz/8/

Answer 3

尝试这个，如果你需要一些请求解释。

$(document).ready(function(){
  $('#back, #front').find('img').on('click', function(e){
    $target = $( e.target );
    var color = $target.attr('src').match(/\/(.+)_.*/)[1];

    console.log(color);

    $target.parent()
         .find('img')
       .removeClass('active');

    $target.addClass('active');

    $target.siblings('img:not(.active)')
         .css('background-color', '');

    $target.css('backgroundColor', color);
    
    if( $('#back .active').length && $('#back .active').length ){
      var back  = $('#back .active').attr('src').match(/\/(.+)_.*/)[1];
      var front = $('#front .active').attr('src').match(/\/(.+)_.*/)[1];

      var mainImg = 'http://brewerybranding.com/apparel/tshirts-new/' 
                  + front + '-' 
                  + back + '.jpg';

      $('#main-image').attr('src', mainImg);      
      console.log(mainImg);
    }
  });
})

.example {
  display: inline-block;
  width: 100px;
  height: 100px;
}

#main-image, #front img, #back img {
  display: inline-block;
  width: 30px;
  height: 30px;
  margin: 5px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="example">
  <img id="main-image">

  <div id="front">
    <img src="/red_thumb.jpg">
    <img src="/green_thumb.jpg">
  </div>

  <div id="back">
    <img src="/blue_thumb.jpg">
    <img src="/black_thumb.jpg">
  </div>
</div>

Javascript图像从多个列表选择更改

3 个答案: