Question

<html>
<head><title>Test</title>
    <link rel="stylesheet" type="text/css" href="Lab4-Pizza.css" />
    <script type="text/javascript">

    function doSonic()
    {
        if (document.getElementById('sonicChecked').checked)
            {
                document.getElementById('sonic').style.visibility="visible";

            }
        else
            {
                document.getElementById('sonic').style.visibility="hidden";
                cost=cost-1;
            }
    }

    function doDrake()
    {
        if (document.getElementById('drakeChecked').checked)
            {
                document.getElementById('drake').style.visibility="visible";

            }
        else
            {
                document.getElementById('drake').style.visibility="hidden";
                cost=cost-2;
            }
    }

    function doEzio()
    {
        if (document.getElementById('ezioChecked').checked)
            {
                document.getElementById('ezio').style.visibility="visible";

            }
        else
            {
                document.getElementById('ezio').style.visibility="hidden";
                cost=cost-1;
            }
    }

    function doJoel()
    {
        if (document.getElementById('joelChecked').checked)
            {
                document.getElementById('joel').style.visibility="visible";

            }
        else
            {
                document.getElementById('joel').style.visibility="hidden";
                cost=cost-1;
            }
    }

    function doGta()
    {
        if (document.getElementById('gtaChecked').checked)
            {
                document.getElementById('gta').style.visibility="visible";

            }
        else
            {
                document.getElementById('gta').style.visibility="hidden";
            }
    }

    function calcCost()
    {

        document.getElementById("costText").innerHTML = "The final cost of your pizza is:  €" + cost + ".00";
        alert("Please refresh page to create another pizza!");
    }

    </script>
</head>
<body>

    <script type="text/javascript">
    var cost = 10.00;
    </script>



    <div style="position: relative; left: 0; top: 0;">
    <img src="images/redshirt.png" width="250" height="450"  alt="redshirt" id="redshirt" style="position: relative; top: 0; left: 0;"/>
    </div>

    <img src="images/sonic.png" width="125" height="225"  alt="Sonic" id="sonic" style="position: absolute; top: 80px; left: 70px;"/>
    <img src="images/drake.png" width="150" height="250"  alt="drake" id="drake" style="position: absolute; top: 80px; left: 50px;" />
    <img src="images/Ezio.png" width="175" height="275" alt="ezio" id="ezio"style="position: absolute; top: 80px; left: 50px;" />
    <img src="images/joel.png" width="120" height="225"  alt="joel" id="joel"style="position: absolute; top: 80px; left: 60px;" />
    <img src="images/gta.png" width="150" height="250"  alt="gta" id="gta"style="position: absolute; top: 80px; left: 70px;" />
    </div>


    <input type="checkbox" id="sonicChecked" onclick="doSonic()" checked="true"> Sonic 
    <input type="checkbox" id="drakeChecked" onclick="doDrake()" checked="true"> Drake 
    <input type="checkbox" id="ezioChecked" onclick="doEzio()" checked="true"> Ezio
    <input type="checkbox" id="joelChecked" onclick="doJoel()" checked="true">  Joel 
    <input type="checkbox" id="gtaChecked" onclick="doGta()"checked="true" > GTA  

    <br><br>

    <div id="prices">
        <p><h2>Shirt Prices:</h2></p>
        <p>1. </p>
        <p>2. </p>
        <p>3. </p>
        <p>4. </p>
        <p>5.</p>
        <p>6.</p>
    </div>

    <button type="button" onclick="calcCost()">Done - Calculate Cost</button>
    <div id="costText" ></div>


 </body>
</html>

我想知道是否有人可以帮我这个，我是一个网站，用户可以在一系列不同颜色的衬衫上订购自定义游戏角色。我正在使用分层来渲染彩色衬衫上的角色。

上面的代码从衬衫上的所有字符选项开始，并使用复选框删除它们。我的问题是，我如何只在衬衫上显示用户选择的角色，同时使每个选项成为可以添加到购物车中的独特订购产品。

目前只有红色衬衫才能使基本用户可以选择。

任何帮助表示感谢。

基于Javascript / HTML的可自定义商店商品

0 个答案: