获取所需图片的jQuery代码
获取所需图片的jQuery代码
提问于 2015-05-18 16:14:11
我正在为我的学校项目做一个网页。我想要2，让我们称之为选择标签，第一个包含一些颜色，第二个图片的车轮为一辆汽车。我有25张照片，其中一辆车有5个不同的车轮和5个不同的颜色。我想做两个下拉菜单，一个让我从我的5种颜色中选择一种，第二种让我从我有的5个轮子中选择一个，在选择了这两个轮子之后，我想用那个汽车的颜色和轮子来连接所有的图片。我想通过图像名称来连接所有这些。
var button_beg = '<button id="button" onclick="showhide()">', button_end = '</button>';
var show_button = 'Show', hide_button = 'Hide';
function showhide() {
var div = document.getElementById("hide_show");
var showhide = document.getElementById("showhide");
if (div.style.display !== "none") {
div.style.display = "none";
button = show_button;
showhide.innerHTML = button_beg + button + button_end;
} else {
div.style.display = "block";
button = hide_button;
showhide.innerHTML = button_beg + button + button_end;
}
}
function setup_button(status) {
if (status == 'show') {
button = hide_button;
} else {
button = show_button;
}
var showhide = document.getElementById("showhide");
showhide.innerHTML = button_beg + button + button_end;
}
window.onload = function () {
setup_button('hide');
showhide(); // if setup_button is set to 'show' comment this line
}我用javascript尝试了这段代码，但它不适合我。有谁知道如何用jQuery精确地编写代码以获得这两个下拉菜单并选择项目？
回答 1
Stack Overflow用户
回答已采纳
发布于 2015-05-18 17:08:57
我现在不知道你的代码是做什么的，但它与问题无关，但是.
让我们假设这是您的HTML，并将图像保存为carcolor_wheelscolor.png
<button id="button">Change</button>car color:
<select id='carcol'>
<option value='red'>red</option>
<option value='blue'>blue</option>
<option value='green'>green</option>
</select>Wheels color:
<select id='wheelcol'>
<option value='red'>red</option>
<option value='blue'>blue</option>
<option value='green'>green</option>
</select>
<div class='df'>
</div>这样你就可以实现你想要的东西：
$('#button').click(function(){
var carcol= $('#carcol').val(),
wheelcol=$('#wheelcol').val(),
imageSrc = "/path/to/images/" + carcol + '_' + wheelcol + '.png';
if ($('img.carImage').length)
$('img.carImage').attr('src ',imageSrc);
else
$('.df').append('<img class="carImage" src="' + imageSrc + '"/>');
});使用纯js(编辑固定)：
document.getElementById('button').addEventListener("click",function(){
var carcol= document.getElementById('carcol').value,
wheelcol=document.getElementById('wheelcol').value,
imageSrc = "/path/to/images/" + carcol + '_' + wheelcol + '.png';
if (document.getElementsByClassName('carImage')[0]){
document.getElementsByClassName('carImage')[0].setAttribute('src',imageSrc);
}
else{
var el=document.createElement("img");
el.setAttribute('class','carImage');
el.setAttribute('src',imageSrc);
document.getElementsByClassName('df')[0].appendChild(el);
}
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/30308159
复制相关文章
相似问题
腾讯云开发者
