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

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


如果用户单击黄色T恤，则将拖曳图像设置为两个不同的区域（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/

最佳答案

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

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>

关于javascript - 一键后，在javascript中的两个div中设置两个不同的图像，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/35739243/