Question

我实际上甚至不知道从哪里开始，因为我的行李箱已经有了计算价格的功能。

基本上，我需要动态更新披萨底座上的图像，因此每次选择一个顶部（复选框），所选顶部的图像将显示在页面上已有的基本图像上。

在我的基础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（）是在选择每个顶部并且它正在工作时动态更新价格。

那么我从哪里开始创建另一个函数来动态构建披萨并选择顶部图像，或者我仍然使用函数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;

希望这个问题有意义，因为它不在我的脑海/

Answer 1

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

Answer 2

一种非常简单的方法：首先，布置一系列映射到浇头的图像。你可以这样做与你的价格相似。

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

当您循环查看价格时，如果找到已检查的项目，只需抓取图像然后显示它（在现有的if语句中）。

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

一块蛋糕！（或披萨）

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

Javascript动态更改图像

2 个答案: