Question

所以我不完全确定我缺少什么，但我似乎无法正确添加总价。不过，我可以得到每个单独的价格。

基本上这个想法是点击一个灰色的图像，它生成一个列表（工作），它假设给出一个价格（这是），如果你点击另一个图像，它应该更新价格，这将添加到以前的价格。

有人可以告诉我我错过了什么或做错了吗？

这是我的小提琴：http://jsfiddle.net/lolsen7/Acnx4/2/

HTML：

<div id="station-builder">
<a class="tools4" href="#"> <img id="keyboard" class="part" src="http://placehold.it/100x100" alt="Keyboard"/><span class="info">apple keyboard</span></a>
<a class="tools5" href="#"><img id="mouse2" class="part" src="http://placehold.it/100x100" alt="Mouse" ><span class="info">apple mouse</span></a
</div>

<div id="summaryTotal">
    <p>Get this system for as little as:</p>
</div>
<ul id="list">
    <li>2201L elo Touchscreen monitor</li>
    <li>Mac mini</li>
</ul>

使用Javascript：

$ //JS FOR HARDWARE SECTION

$(document).ready(function () {

        $(".part").mouseover(function () {
            if (this.className !== 'part selected') {
                $(this).attr('src', 'http://placehold.it/100x100' + this.id + 'http://placehold.it/100x100');
            }
            $(this).mouseout(function () {
                if (this.className !== 'part selected') {
                    $(this).attr('src', 'http://placehold.it/100x100' + this.id + 'http://placehold.it/100x100');
                }
            });
        });

        var list = document.getElementById("list");
        var summaryTotal = document.getElementById("summaryTotal");
        var sum = 0;
        var total = 0;
        var finalTotal = 0;

        $(".part").click(function () {
            if (this.className == 'part') {
                $(this).attr('src', 'http://placehold.it/100x100' + this.id + 'http://placehold.it/100x100');
                console.log(this);



                if (this.id == 'keyboard') {
                    var li = document.createElement("li");
                    //li.setAttribute("alt","keyboard_li");
                    li.setAttribute("id", "keyboard_li");
                    li.appendChild(document.createTextNode('Keyboard'));
                    list.appendChild(li);


                    var keyboardPrice = "59";
                    sum = keyboardPrice * 1.2;
                    console.log(sum);
                    total = sum / 40;
                    console.log(total);

                    var span = document.createElement('span');
                    span.setAttribute('id', 'keyboardTotal');
                    summaryTotal.appendChild(span);
                    $('#keyboardTotal').append(total);

                }
                if (this.id == 'mouse2') {
                    li = document.createElement("li");
                    li.setAttribute("id", "mouse_li");
                    li.appendChild(document.createTextNode('Mouse'));
                    list.appendChild(li);

                    var mousePrice = "59";
                    sum = mousePrice * 1.2;
                    console.log(sum);
                    total = sum / 40;
                    console.log(total);

                    var span = document.createElement('span');
                    span.setAttribute('id', 'mouseTotal');
                    summaryTotal.appendChild(span);
                    $('#mouseTotal').append(total);

                }

            } else {
                $(this).attr('src', 'http://placehold.it/100x100' + this.id + 'http://placehold.it/100x100');
                console.log(this);

                if (this.id == "keyboard") {
                    $("#keyboard_li").remove();
                    $('#keyboardTotal').remove();
                }
                if (this.id == "mouse2") {
                    $("#mouse_li").remove();
                }

            }
            $(this).toggleClass('selected');
        });

        total = $('#keyboardTotal') + $('#mouseTotal');


    });

Answer 1

您可以进行以下更改吗？

          var kbtotal = 0;//added
          var mstotal = 0;//added
          var keyboardPrice = 59;
          sum = keyboardPrice * 1.2;
          console.log(sum);
          kbtotal = sum / 40; // changed
          console.log(kbtotal); // changed

          var mousePrice = 59;
          sum = mousePrice * 1.2;
          console.log(sum);
          mstotal = sum / 40; // changed
          console.log(mstotal); // changed

          var finaltotal = parseFloat(kbtotal) + parseFloat(mstotal);
          $('#finaltotal').text(finaltotal); // added

<div id="summaryTotal">
    <p>Get this system for as little as: <div id="finaltotal"></div></p>
</div>

通过单击图像更新包含多个列表项的总计

1 个答案: