2017-04-06 8 views
0

私は数週間後にHTML/JavaScriptプロジェクトを開始する予定で、カート機能を作成する方法についています。私はカートの基本を選別しました。しかし、それは各単一の製品のための多くのコードであるようです。どのように配列やスクリプトを使ってローカルメモリにすべての製品を適切かつ効率的に格納することができるのかよく分かりませんが、どうやって最適なのかわかりません。これは私がこれまで持っているものです。複数の製品をローカルメモリに効率的に保存する方法

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 

 
    <body> 
 
    <p><button onclick="AddAMToCart()" type="button">Add AM to Cart</button></p> 
 
    <p><button onclick="AddSonicHighWaysToCart()" type="button">Add SonicHighWays to Cart</button></p> 
 
    <p><button onclick="AddHotelCaliforinaToCart()" type="button">Add    HotelCaliforina to Cart</button></p> 
 
    <p><button onclick="AddFiddyCentToCart()" type="button">Add FiddyCent to Cart</button></p> 
 
    <br> 
 
    <p><button onclick="clearCart()" type="button">Clear Cart</button></p> 
 
    <div id="result"></div> 
 
    </body> 
 

 

 
    <script> 
 
    var AM = 3.50; 
 
    var SonicHighWays = 4.50; 
 
    var HotelCaliforina = 6.00; 
 
    var FiddyCent = 0.50; 
 

 
    function AddAMToCart() { 
 
     if (typeof(Storage) !== "undefined") { 
 
     if (localStorage.Cart) { 
 
      localStorage.Cart = Number(localStorage.Cart) + AM; 
 
     } else { 
 
      localStorage.Cart = 0; 
 
     } 
 
     document.getElementById("result").innerHTML = "Total Cost: " + localStorage.Cart; 
 
     } 
 
    } 
 

 
    function AddSonicHighWaysToCart() { 
 
     if (typeof(Storage) !== "undefined") { 
 
     if (localStorage.Cart) { 
 
      localStorage.Cart = Number(localStorage.Cart) + SonicHighWays; 
 
     } else { 
 
      localStorage.Cart = 0; 
 
     } 
 
     document.getElementById("result").innerHTML = "Total Cost: " + localStorage.Cart; 
 
     } 
 
    } 
 

 
    function AddHotelCaliforinaToCart() { 
 
     if (typeof(Storage) !== "undefined") { 
 
     if (localStorage.Cart) { 
 
      localStorage.Cart = Number(localStorage.Cart) + HotelCaliforina; 
 
     } else { 
 
      localStorage.Cart = 0; 
 
     } 
 
     document.getElementById("result").innerHTML = "Total Cost: " + localStorage.Cart; 
 
     } 
 
    } 
 

 
    function AddFiddyCentToCart() { 
 
     if (typeof(Storage) !== "undefined") { 
 
     if (localStorage.Cart) { 
 
      localStorage.Cart = Number(localStorage.Cart) + FiddyCent; 
 
     } else { 
 
      localStorage.Cart = 0; 
 
     } 
 
     document.getElementById("result").innerHTML = "Total Cost: " + localStorage.Cart; 
 
     } 
 
    } 
 

 
    function clearCart() { 
 
     localStorage.Cart = 0; 
 
     document.getElementById("result").innerHTML = "Total Cost: " + localStorage.Cart; 
 
    } 
 
    </script> 
 
</head> 
 

 
</html>

答えて

0

あなたはこのようなものの中にそのコードのすべてをリファクタリングできます

は、製品の値を持つ単一のオブジェクトを作成します。

ヒント:productValues.HotelCaliforniaの場合、 はproductValues["HotelCalifornia"]と同じです。

var productValues = { 
    AM: 3.50, 
    SonicHighWays: 4.50, 
    HotelCaliforina: 6.00, 
    FiddyCent: 0.50 
} 

次に、この抽象化のようなものの中に、これらの機能のすべてを統合。

function AddToCart(type) { 
    if(typeof(Storage) !== "undefined") { 
     if (localStorage.Cart) { 
      localStorage.Cart = Number(localStorage.Cart) + productValues[type]; 
     } else { 
      localStorage.Cart = 0; 
       } 
     document.getElementById("result").innerHTML = "Total Cost: " + localStorage.Cart; 
    } 
} 

次にあなたがそうのようなあなたの新しいメソッドを呼び出します。あなたのHTML

AddToCart('HotelCaliforina'); 

AddToCart("HotelCaliforina"); 

またはこのインラインのようにまたここにイム間違っている場合は、あなたが本当にあるなら、私を修正「追加」をカートに追加すると、「else」ステートメントに割り当てられた0の値は決して必要ありません。 localStorage.Cartはこのように「カートに入れる」機能の外であらかじめ定義する必要があります。

var localStorage = { 
    Cart: 0, 
    Etc: "Some Value" 
}; 
function AddToCart(type) { 
    localStorage.Cart = Number(localStorage.Cart) + productValues[type]; 
    document.getElementById("result").innerHTML = "Total Cost: " + localStorage.Cart; 

} 

・ホープこれはあなたの質問に答えると、あなたに少しのに役立ちます。

関連する問題