点击javascript中的图片后更改图片（不使用下拉菜单）

Question

现在我正在通过下拉选择更改图像。但我想通过点击选择图像来改变图像

如果用户点击绿色T恤图像，则在<div>中设置绿色图像，如果用户点击黄色T恤，则在<div>.中设置黄色T恤 但是现在我正在使用这个程序的下拉列表。

＆＃13;

＆＃13;

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'
]
$('#imageroom').on('change', function() {
  value = $(this).val() - 1;
  $('#backgroundIMage').css({
    'background-image': 'url(' + bgArray[value] + ')'
  });
});

＆＃13;

#backgroundIMage {
  width: 400px;
  height: 300px;
  outline: 1px dotted gray;
  margin: 0 auto;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<label>Change image</label>
<select size="1" id="imageroom">
  <option value="1">Image 1</option>
  <option value="2">IMage 2</option>
</select>


<!-- for demo only -->
<hr>
<div id="backgroundIMage"></div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

虽然很难知道完全你想要做什么，但你应该尝试使用图片的click事件。

对于特定图片：

$('#myImageId').click(function(){ 
  $(this).css//etc..
});

对于所有图像：

$('img').click(function(){
   $(this).css//etc..  
});

Answer 2

您可以处理图片上的click事件。在下面的示例中，我遍历bgArray并动态显示该数组中的所有图像。

单击其中一个图像时，我会在backgroundIMage元素中显示该图像。请注意，我使用event delegation来确保图片点击适用于动态添加到picker的所有图片。

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'
];

$("#picker").on("click", "img", function() {
  //use event delegation to handle click event of any img tags in #picker
  $('#backgroundIMage').css({
    'background-image': 'url(' + this.src + ')'
  });
  
  //toggle selected
  $("#picker img").removeClass("selected");
  $(this).addClass("selected");
});

$(function() {
  //initialize the picker on document load
  bgArray.forEach(function(src) {
    var img = new Image(50, 50);
    img.src = src;
    $("#picker").append(img);
  });
  
  //default the first one to be selected
  $("#picker img").first().trigger("click");
});

#backgroundIMage {
  width: 400px;
  height: 300px;
  outline: 1px dotted gray;
  margin: 0 auto;
}

#picker 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>
Change image
<div id="picker"></div>

<hr>
<div id="backgroundIMage"></div>