我如何使用 javascript 显示来自对象的图像而不是将图像链接放在值上,这里是演示 Demo Codepen
我这样做了,但我想要的是将它放在对象中,并且当用户从左到右选择并最终在一个 div 中求和时,每个选择都有一个价格。
function displayImage(elem) {
var image = document.getElementById("canvas");
image.src = elem.value;
}
function displayImages(elem) {
var image = document.getElementById("canvass");
image.src = elem.value;
}
function same() {
if (document.getElementById("canvas").src ==
document.getElementById("canvass").src) {
document.getElementById('total').innerHTML = "13$";
}
}
var silver = {
image: 'https://lol-eloboosting.com/assets/images/divisions/1_3.png',
price: 20
};
var gold = {
image: 'https://lol-eloboosting.com/assets/images/divisions/2_1.png',
price: 25
};
var platina = {
image: 'https://lol-eloboosting.com/assets/images/divisions/3_1.png',
price: 35
};
var platina = {
image: 'https://lol-eloboosting.com/assets/images/divisions/4_1.png',
price: 45
};
最佳答案
如果你能像下面那样做,你已经保存了图像 url 和文本
以显示在 object
中,现在你可以使用 if condition
沿事件监听器更改
,如下所示,我没有将您的代码用于引用示例
,您可以尝试类似的东西。
var one = {
url : "https://via.placeholder.com/200/111/fff",
txt : "Hey my value is one!!!"
};
var two = {
url : "https://via.placeholder.com/200/ff1/fff",
txt : "Hey my value is two!!!"
};
var three = {
url : "https://via.placeholder.com/200/3f2/fff",
txt : "Hey my value is three!!!"
};
var slt = document.querySelector("select");
var ig = document.querySelector("img");
var para = document.createElement("p");
slt.addEventListener("change",function(){
if(this.value == 1){
ig.src = one.url;
para.textContent = one.txt;
document.body.append(para);
}
if(this.value == 2){
ig.src = two.url;
para.textContent = two.txt;
document.body.append(para);
}
if(this.value == 3){
ig.src = three.url;
para.textContent = three.txt;
document.body.append(para);
}
});
<select>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<br><br>
<img src="https://via.placeholder.com/200/111/fff">
关于javascript - 使用选择显示来自对象的图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45649230/