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

Question

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

如果绿色的T恤图片，用户点击即可设置绿色形象<div>，如果黄色T恤的用户点击，然后设置黄色T恤在<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' 
 
] 
 
$('#imageroom').on('change', function() { 
 
    value = $(this).val() - 1; 
 
    $('#backgroundIMage').css({ 
 
    'background-image': 'url(' + bgArray[value] + ')' 
 
    }); 
 
});

#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> 
 
<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>

Answer 1

您可以处理图像的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>

Answer 2

虽然这是艰苦的国王知道究竟什么你正在尝试做的，你应该尝试与click事件图像的工作。

对于一个特定的形象：

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

对于所有图片：

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