单击后在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>

Answer 2

为此，您必须创建一个默认的 JSON 结构，如下所示：

{
 data:[
  {
   "mainSrc":"https://d3s16h6oq3j5fb.cloudfront.net/1.13.0/img/new-city-home/bang-img/softtoys3.jpg",
   "backSrc":"sss.jpg",
   "frontSrc":"sddsd.jpg"
  },
{
   "mainSrc":"https://d3s16h6oq3j5fb.cloudfront.net/1.13.0/img/new-city-home/bang-img/softtoys3.jpg",
   "backSrc":"sss.jpg",
   "frontSrc":"sddsd.jpg"
  }
 ]
}

然后从click元素attr和get front back src中动态引用索引。

Answer 3

请参考下面这个小提琴：

小提琴：fiddle

只需在 html 代码中为前后图像 div 添加 id 并通过 javascript 分配图像背景。这是修改后的代码。

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 + ')'
  });
  $('#front').css({
    'background-image': 'url(' + bgArray[1] + ')'
 });
 $('#back').css({
   'background-image': 'url(' + bgArray[2] + ')'
 });
});

<div style="height:200px;width:200px;border:1px solid #333" id="front">
  Front Side Image
</div>
<div style="height:200px;width:200px;border:1px solid #333" id="back">
  back Side Image
</div>