Javascript动态改变图像

我实际上甚至不知道从哪里开始，因为我的复选框已经有一个功能来计算它们的价格。Javascript动态改变图像

基本上，我需要动态更新比萨饼基础上的图像，以便每次选择顶部时（复选框）所选顶部图像将出现在页面上已有的基础图像上。

在我的HTML为基础，我有：

<div class="base"> 
      <img id="pBase" alt= "Pizza " src="img/base.png" /> 
</div>

对于我的复选框我有类似：

input type="checkbox" name="topping" value="topping1" onclick="Total()" /> Topping1<br /> 
      <input type="checkbox" name="topping" value="topping2" onclick="Total()" /> Topping2<br /> 
      <input type="checkbox" name="topping" value="topping3" onclick="Total()" /> Topping3<br />

现在目前，我的功能总（）是动态更新的价格为每个顶部都被选中，并且正在盛大工作。

那么我从哪里开始创建另一个功能来动态构建比萨，并选择顶部图像或者我仍然使用函数Total（）？如果是的话，我该如何继续？

var top_type = new Array(); 
top_type["topping1"]=2.00; 
top_type["topping2"]=2.00; 
top_type["topping3"]=2.00; 

function getTopPrice() 
{ 
    var TopPrice=0; 
    var theForm = document.forms["orderform"]; 
    var topOption = theForm.elements["topping"]; 
    for(var i = 0; i < topOption.length; i++) 
    { 
     if(topOption[i].checked==true) 
     { 
      TopPrice += top_type[topOption[i].value]; 
     } 
    } 
    return TopPrice;

希望这个问题是有道理的，因为它是不是在我的脑海/

来源

2015-12-02 Toblerone

为了更好的理解，请提供一份**工作演示**（*代码片段，jsfiddle ... *） –

一旦我回到家，就会得到这个 – Toblerone

一个非常简单的方法：要开始，布局映射到您的浇头图像阵列。你可以这样做你的价格。

var top_img = new Array(); 
top_img["topping1"]="topping1.jpg"; 
top_img["topping2"]="topping2.jpg"; 
top_img["topping3"]="topping3.jpg";

当您通过价格循环，你会发现一个检查项目，只要抓住了图像，然后和显示它（里面现有的if语句）。

您必须快速阅读不透明度来覆盖图像。

小菜一碟！（或披萨）

你也可以重构这个在任何情况下都不使用循环，但我不想完全重构你的工作。

来源

2015-12-02 15:15:36 spozun

嗯，你使用onclick属性绑定click事件;所以，为了得到这个工作，你可以使用你的Total（）函数（我在你的列表中看不到那个函数，tho）。您可以制作一个透明图像，每个顶部的ID等于正确顶部复选框的值并切换其可见性。

来源

2015-12-02 15:06:52

Javascript动态改变图像

回答

相关问题