单击一次后，在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”）。在（“单击”，“img”，函数（）上）{
$（'.backgroundIMage'）.css({
“背景图像”：“url（“+this.src+”）”
});
});
$（函数（）{
bgArray.forEach（函数（src）{
var img=新图像（50,50）；
img.src=src；
$（“.picker image”）.append（img）；
});
});
.backgroundIMage{
宽度：400px；
高度：300px；
轮廓：1px点灰色；
保证金：0自动；
}


正面图像
背面图像
请参阅下面的小提琴：

小提琴：

只需在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>

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”）。在（“单击”，“img”，函数（）上）{
$（'.backgroundIMage'）.css({
“背景图像”：“url（“+this.src+”）”
});
$（'#前面'）.css({
'背景图像'：'url（'+bgArray[1]+'）'
});
$（'#back'）.css({
'背景图像'：'url（'+bgArray[2]+'）'
});
});
正面图像
背面图像
请参阅下面的小提琴：

小提琴：

只需在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>

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”）。在（“单击”，“img”，函数（）上）{
$（'.backgroundIMage'）.css({
“背景图像”：“url（“+this.src+”）”
});
$（'#前面'）.css({
'背景图像'：'url（'+bgArray[1]+'）'
});
$（'#back'）.css({
'背景图像'：'url（'+bgArray[2]+'）'
});
});
正面图像
背面图像
您需要存储正面和背面图像之间的关系。我建议使用一个对象数组，数组中的每个项目都包含前面和后面的图像。然后，单击选择器项目时，可以填充正面和背面图像


var bgArray=[
{
正面：'https://d2z4fd79oscvvx.cloudfront.net/0020715_be_my_valentine_chocolate_box_205.jpeg',
背：'http://lorempixel.com/200/200/sports/1/'
},
{
正面：'https://d2z4fd79oscvvx.cloudfront.net/0016630_quad_diamond_earings_205.jpeg',
背：'http://lorempixel.com/200/200/sports/2/'
},
{
正面：'https://d3s16h6oq3j5fb.cloudfront.net/1.13.0/img/new-city-home/bang-img/softtoys3.jpg',
背：'http://lorempixel.com/200/200/sports/3/'
}
];
$（“.picker image”）。在（“单击”，“img”，函数（）上）{
//在数组中查找“front”与所单击图像的URL匹配的项
var src=this.src；
var item=bgArray.find（函数（元素）{
返回元素.front==src；
});
//设置正面图像
$（“#前”）.css({
“背景图像”：“url（“+item.front+”）”
});
//将图像放回原处
$（“#返回”）.css({
“背景图像”：“url（'+item.back+'）”
});
//指明所选的一个
$（“.picker image img”）.removeClass（“选定”）；
$（此）.addClass（“选定”）；
});
$（函数（）{
//动态填充图像选择器
bgArray.forEach（函数（项）{
var img=新图像（50,50）；
img.src=item.front；
$（“.picker image”）.append（img）；
});
//默认情况下选择第一个
$（“.picker image img”）.first（）.trigger（“单击”）；
});
.product{
高度：200px；
宽度：200px；
边框：1px实心#333；
利润率：10px；
显示：内联块；
}
.选择器图像img{
填充物：5px；
}
.选定{
背景色：淡蓝色；
边界半径：10px；
}

挑一个

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


var bgArray=[
{
正面：'https://d2z4fd79oscvvx.cloudfront.net/0020715_be_my_valentine_chocolate_box_205.jpeg',
背：'http://lorempixel.com/200/200/sports/1/'
},
{
正面：'https://d2z4fd79oscvvx.cloudfront.net/0016630_quad_diamond_earings_205.jpeg',
背：'http://lorempixel.com/200/200/sports/2/'
},
{
正面：'https://d3s16h6oq3j5fb.cloudfront.net/1.13.0/img/new-city-home/bang-img/softtoys3.jpg',
背：'http://lorempixel.com/200/200/sports/3/'
}
];
$（“.picker image”）。在（“单击”，“img”，函数（）上）{
//在数组中查找“front”与所单击图像的URL匹配的项
var src=this.src；
var item=bgArray.find（函数（元素）{
返回元素.front==src；
});
//设置正面图像
$（“#前”）.css({
“背景图像”：“url（“+item.front+”）”
});
//将图像放回原处
$（“#返回”）.css({
“背景图像”：“url（'+item.back+'）”
});
//指明所选的一个
$（“.picker图像img