之后点击以JavaScript 2格设置两个不同的图像 [英] After one click set two different image in two div in javascript

查看：180
本文介绍了之后点击以JavaScript 2格设置两个不同的图像的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我实现使用Java脚本定制的T恤。现在，我点击图片后选择集合中的一个背景图像。但是现在我想在点击经过两次div来设置两个不同的图像一次。结果

如果上黄色T恤的用户点击，然后在两个不同的分区设置拖图像。（T恤的正面大小的图片和影像背面）。

\r
\r

VAR bgArray = [\r
  https://d3s16h6oq3j5fb.cloudfront.net/1.13.0/img/new-city-home/bang-img/softtoys3.jpg'，\r
  https://d2z4fd79oscvvx.cloudfront.net/0020715_be_my_valentine_chocolate_box_205.jpeg'，\r
   https://d2z4fd79oscvvx.cloudfront.net/0016630_quad_diamond_earings_205.jpeg'，\r
];\r
\r
$（拾取图像）。在（点击，IMG功能（）{\r
  $（'。将backgroundImage）。CSS（{\r
    背景图片：URL（'+​​ this.src +'）'\r
  }）;\r
}）;\r
\r
$（函数（）{\r
  bgArray.forEach（功能（SRC）{\r
    VAR IMG =新的图像（50，50）;\r
    img.src = SRC;\r
    $（拾取图像）追加（IMG）。\r
  }）;\r
}）;

\r

.backgroundIMage {\r
    宽度：400像素;\r
    高度：300像素;\r
    概要：1px的虚线灰色;\r
    保证金：0汽车;\r
}

\r

＆LT;脚本SRC =htt​​ps://ajax.googleapis.com/ajax /libs/jquery/1.11.0/jquery.min.js\"></script>\r
\r
  \r
  ＆LT; D​​IV CLASS =拾取图像＆GT;＆LT; / DIV＆GT;\r
\r
\r
\r
＆LT;！ - 为演示只 - ＆GT;\r
＆LT;小时＆GT;\r
＆LT; D​​IV CLASS =和backgroundImage＆GT;＆LT; / DIV＆GT;\r
＆LT; D​​IV的风格=高度：200像素;宽度：200像素;边界：1px的固体＃333＆GT;\r
正面图片\r
＆LT; / DIV＆GT;\r
＆LT; D​​IV的风格=高度：200像素;宽度：200像素;边界：1px的固体＃333＆GT;\r
反面的图像\r
＆LT; / DIV＆GT;

\r

\r
\r结果
 最后，我想点击的T恤，然后两个图像设定为图像和图像的背面两格正面。

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


解决方案

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

\r
\r

VAR bgArray = [\r
  {\r
    前面：https://d2z4fd79oscvvx.cloudfront.net/0020715_be_my_valentine_chocolate_box_205.jpeg'，\r
    回：http://lorempixel.com/200/200/sports/1/\r
  }，\r
  {\r
    前面：https://d2z4fd79oscvvx.cloudfront.net/0016630_quad_diamond_earings_205.jpeg'，\r
    回：http://lorempixel.com/200/200/sports/2/\r
  }，\r
  {\r
    前面：https://d3s16h6oq3j5fb.cloudfront.net/1.13.0/img/new-city-home/bang-img/softtoys3.jpg'，\r
    回：http://lorempixel.com/200/200/sports/3/\r
  }\r
];\r
\r
$（拾取图像）。在（点击，IMG功能（）{\r
  //找到那里的'正面'被点击的图像的URL匹配的数组中的项\r
  变种SRC = this.src;\r
  VAR项目= bgArray.find（函数（元素）{\r
    返回element.front === SRC;\r
  }）;\r
  \r
  //设置的正面图像\r
  $（＃战线）。CSS（{\r
    背景图片：URL（'+​​ item.front +'）'\r
  }）;\r
\r
  //设置背面图像\r
  $（＃背面）。的CSS（{\r
    背景图片：URL（'+​​ item.back +'）'\r
  }）;\r
  \r
  //指示所选择的一个\r
  $（拾取图像IMG）。removeClass移除（选中）。\r
  $（本）.addClass（选择）;\r
  \r
}）;\r
\r
$（函数（）{\r
  //动态填充图像选择器\r
  bgArray.forEach（函数（项目）{\r
    VAR IMG =新的图像（50，50）;\r
    img.src = item.front;\r
    $（拾取图像）追加（IMG）。\r
  }）;\r
\r
  //默认选择第一个\r
  。$（拾取图像IMG）第一（）触发（点击）;\r
}）;

\r

。产品{\r
  高度：200像素;\r
  宽度：200像素;\r
  边框：1px的固体＃333;\r
  保证金：10px的;\r
  显示：inline-block的;\r
}\r
\r
.picker图像IMG {\r
  填充：5像素;\r
}\r
\r
.selected {\r
  背景色：宝蓝;\r
  边界半径：10px的;\r
}

\r

＆LT;脚本SRC =htt​​ps://ajax.googleapis.com/ajax /libs/jquery/1.11.0/jquery.min.js\"></script>\r
\r
选一个\r
＆LT; D​​IV CLASS =拾取图像＆GT;＆LT; / DIV＆GT;\r
\r
＆LT;小时＆GT;\r
＆LT; D​​IV ID =前级=产品＆GT;\r
  正面图片\r
＆LT; / DIV＆GT;\r
＆LT; D​​IV ID =后面级=产品＆GT;\r
  背面图片\r
＆LT; / DIV＆GT;

\r

\r
\r

I am implementing customize t-shirt using java script. Right now i am set one background image after click on image choice. But right now i want to set two different image in two div after click once.

If user click on yellow t-shirt then set tow images in two different div.(front size image and backside image of t-shirt).

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>


Finally i want click t-shirt then two images set into two div front side of image and back side of image.

For Hints https://jsfiddle.net/varunPes/p9L76j0z/2/

解决方案

You will need to store the relationship between the front and back images. I'd suggest using an array of objects, where each item in the array contains the front and back images. Then when the selector item is clicked, you can populate the front and back images.

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 2格设置两个不同的图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆