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動態改變圖像

回答

相關問題