javascript - 一键点击后在javascript中的两个div中设置两个不同的图像

Question

我正在使用java脚本实现定制T恤。现在，我在单击图像选择后设置了一张背景图像。但现在我想在单击一次后在两个 div 中设置两个不同的图像。

如果用户点击黄色T恤，则在两个不同的div中设置两个图像(T恤的正面尺寸图像和背面图像)。

var bgArray = [
  'https://d3s16h6oq3j5fb.cloudfront.net/1.13.0/img/new-city-home/bang-img/softtoys3.jpg',
  'https://d2z4fd79oscvvx.cloudfront.net/0020715_be_my_valentine_chocolate_box_205.jpeg',
   'https://d2z4fd79oscvvx.cloudfront.net/0016630_quad_diamond_earings_205.jpeg',
];

$(".picker-image").on("click", "img", function() {
  $('.backgroundIMage').css({
    'background-image': 'url(' + this.src + ')'
  });
});

$(function() {
  bgArray.forEach(function(src) {
    var img = new Image(50, 50);
    img.src = src;
    $(".picker-image").append(img);
  });
});

.backgroundIMage{
    width:400px;
    height:300px;
    outline:1px dotted gray;
    margin:0 auto;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

  
  <div class="picker-image"></div>



<!-- for demo only -->
<hr>
<div class="backgroundIMage"></div>
<div style="height:200px;width:200px;border:1px solid #333">
Front Side Image
</div>
<div style="height:200px;width:200px;border:1px solid #333">
back Side Image
</div>

最后我想点击T恤，然后将两个图像设置为图像正面和图像背面的两个div。

提示 https://jsfiddle.net/varunPes/p9L76j0z/2/

Answer 1

您需要存储正面和背面图像之间的关系。我建议使用对象数组，其中数组中的每个项目都包含正面和背面图像。然后，当单击选择器项时，您可以填充正面和背面图像。

var bgArray = [
  {
    front: 'https://d2z4fd79oscvvx.cloudfront.net/0020715_be_my_valentine_chocolate_box_205.jpeg',
    back: 'http://lorempixel.com/200/200/sports/1/'
  },
  {
    front: 'https://d2z4fd79oscvvx.cloudfront.net/0016630_quad_diamond_earings_205.jpeg',
    back: 'http://lorempixel.com/200/200/sports/2/'
  },
  {
    front: 'https://d3s16h6oq3j5fb.cloudfront.net/1.13.0/img/new-city-home/bang-img/softtoys3.jpg',
    back: 'http://lorempixel.com/200/200/sports/3/'
  }
];

$(".picker-image").on("click", "img", function() {
  //find the item in the array where the 'front' matches the URL of the image that was clicked
  var src = this.src;
  var item = bgArray.find(function(element) {
    return element.front === src;
  });
  
  //set the front image
  $("#front").css({
    'background-image': 'url(' + item.front + ')'
  });

  //set the back image
  $("#back").css({
    'background-image': 'url(' + item.back + ')'
  });
  
  //indicate the selected one
  $(".picker-image img").removeClass("selected");
  $(this).addClass("selected");
  
});

$(function() {
  //dynamically populate image picker
  bgArray.forEach(function(item) {
    var img = new Image(50, 50);
    img.src = item.front;
    $(".picker-image").append(img);
  });

  //select the first one by default
  $(".picker-image img").first().trigger("click");
});

.product {
  height:200px;
  width:200px;
  border:1px solid #333;
  margin:10px;
  display: inline-block;
}

.picker-image img {
  padding: 5px;  
}

.selected {
  background-color: dodgerblue;
  border-radius : 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

Pick One
<div class="picker-image"></div>

<hr>
<div id="front" class="product">
  Front Side Image
</div>
<div id="back" class="product">
  Back Side Image
</div>