点击一下，在javascript中的两个div中设置两个不同的图像

我正在使用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; } 

  
  
 
 
 Front Side Image 
 
 back Side Image  

最后我要点击T恤然后两个图像设置成图像的两个div正面和图像的背面。

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

Answer 1

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

 var bgArray = [ { front: 'http://sofzh.miximages.com/javascript/0020715_be_my_valentine_chocolate_box_205.jpg', back: 'http://lorempixel.com/200/200/sports/1/' }, { front: 'http://sofzh.miximages.com/javascript/0016630_quad_diamond_earings_205.jpg', 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; } 

  Pick One 
 
 
 Front Side Image 
 
 Back Side Image  

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

请参考下面这个小提琴：

小提琴： 小提琴

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

 var bgArray = [ 'https://d3s16h6oq3j5fb.cloudfront.net/1.13.0/img/new-city-home/bang-img/softtoys3.jpg', 'http://sofzh.miximages.com/javascript/0020715_be_my_valentine_chocolate_box_205.jpg', 'http://sofzh.miximages.com/javascript/0016630_quad_diamond_earings_205.jpg', ]; $(".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] + ')' }); }); 
 Front Side Image 
 
 back Side Image