Question

我的问题是，当我点击“删除”时，它会删除所有项目，而不是仅删除一项。我觉得我需要使用一个数组来解决这个问题，但我只是不知道我该怎么做。

我还想添加在“金额”框中列出大额金额的功能，这样我的员工就不必为大订单点击“衬衫”了。例如，当金额为30时输入“金额”，并点击“添加”时，我希望它列出“票证（x30）”，而不是我的员工必须单击“添加”30次。

目前，当我点击“删除”时，我只想删除一个项目，但我猜是因为我要删除的项目是文本值而不是数组，很难指定我只想删除1项。

此外，根据自定义“金额”，我无法挽救我的生命。我甚至不知道从哪里开始。我尝试的一切都失败了。

小提琴附： Here

的Javascript

<script>
$(document).ready(function() {
    ticket = 1;
    //setting action for num-buttonTicket when clicked
    $(".num-buttonTicket").click(function(){
        $(".num-buttonTicket").css({background: "#ff6a00"});
        $(".num-buttonVIP").css({background: ""});
        $(".num-buttonShirt").css({background: ""});
        $(".remove-button").css({background: ""});
        $(".add-button").css({background: ""});
        ticket = 3;
    });
    //setting action for num-buttonVIP when clicked
    $(".num-buttonVIP").click(function() {
        $(".num-buttonVIP").css({background: "#ff6a00"});
        $(".num-buttonTicket").css({background: ""});
        $(".num-buttonShirt").css({background: ""});
        $(".remove-button").css({background: ""});
        $(".add-button").css({background: ""});
        ticket = 4;
    });
    //setting action for num-buttonShirt when clicked
    $(".num-buttonShirt").click(function() {
        $(".num-buttonShirt").css({background: "#ff6a00"});
        $(".num-buttonTicket").css({background: ""});
        $(".num-buttonVIP").css({background: ""});
        $(".remove-button").css({background: ""});
        $(".add-button").css({background: ""});
        ticket = 5;
    });
    $(".clear-button").click(function() {
        var result = confirm("Are You Sure You Want To Clear This Transaction?");
if (result==true) {
    $(".num-buttonShirt").css({background: ""});
        $(".num-buttonTicket").css({background: ""});
        $(".num-buttonVIP").css({background: ""});
        $(".remove-button").css({background: ""});
        $(".add-button").css({background: ""});
        ticket = 1
        document.frm.display.value = "";
}
    });

    //setting conditions for add-button when clicked
    $(".add-button").click(function() {
        //set the if
        if (ticket > 2) {
            $(".add-button").css({background: "#ff6a00"});
            $(".remove-button").css({background: ""});
        }
        else {
            alert("First, select an item you would like to add.");
        }
        //////////////Code for posting Top Values
        if (ticket == 3){document.frm.display.value += " + Ticket"
            };

        if (ticket == 4){document.frm.display.value += " + VIP"
            };

        if (ticket == 5){document.frm.display.value += " + Shirt"
            };
        //////////////end
    });

    $(".remove-button").click(function() {
        //set the if
        if (ticket > 2) {
            $(".remove-button").css({background: "#ff6a00"});
            $(".add-button").css({background: ""});
        }
        else {
            alert("First, select an item you would like to remove.");
        }
        //////////////Code for posting Top Values

        if (ticket == 3){document.frm.display.value -= " + Ticket"
            };

        if (ticket == 4){document.frm.display.value -= " + VIP"
            };

        if (ticket == 5){document.frm.display.value -= " + Shirt"
            };
        //////////////end
    });
});
</script>

HTML

<div id="store"><!--start of store-->
<div id="side"><!--start of side-->
<div id="sidepanel"> <!--start of sidepanel-->
    <div id="sidepaneltitle"><!--start of sidepaneltitle-->
    STORE
    </div><!--end of sidepaneltitle-->

    <div class="num-buttonTicket">TICKET</div>
    </br>
    <div class="num-buttonVIP">VIP TICKET</div>
    </br>
    <div class="num-buttonShirt">SHIRT</div>
    </br>

    <div id="spacer"><!--start of spacer-->
    <div class="add-button">ADD</div>
    <div class="remove-button">REMOVE</div>
    <div class="clear-button">CLEAR</div>
    <div class="submit-button">NEW</div>
    <div class="final-button">FINAL</div>
    </div><!--end of spacer-->

</div><!--end of sidepabel-->
</div><!--end of side-->
<div id="calculatorPROP"><!--start of calculatorPROP-->
<div id="calculator"><!--start of calculator-->
<form name="frm">
<input type="text" id="display" value=""readonly /> 
<div id="blank"><!--start of blank-->
<input type="text" id="display2" value=""/> 
</form>
</div><!--end of blank-->
</div><!--end of calculator-->
</div><!--end of calculatorPROP-->
<form name="amount">
<input type="text" id="amount" value="" placeholder="amount"/>
</form>
</div><!--end of store-->

Answer 1

我重写了添加，删除和清除函数，使它们利用数组而不是直接DOM操作来存储订单。

删除项目现在可以正常工作，并且您要删除的项目不必是列表中的最后一项（因为您编写的的伪代码已完成）。有关添加和删除的详细信息，请参阅下一项。
现在，您可以通过更改“添加”按钮旁边的数量字段的值，一次添加一个或多个相同的项目，或者通过更改数量字段的值来删除所选项目的数量到“删除”按钮。
您还可以通过在数量字段内滚动来快速增加这些数量（这是“数字”输入类型的内置功能）
jQuery有一个函数[array].join(string);，它允许你顶部的项目列表在第一个项目之后的项目之间只包含“+”（不再是“+ Shirt + Shirt”）。
我还做了一些格式化和CSS更改，只是为了让事情更合适。如果您想要边框半径和标题，请查看底部的第二个链接，以获取没有这些修改的旧版本（也缺少一些脚本修改）。

代码示例：

//Add Function    
if (ticket > 2){
        for (i = 0; i < (Number($("#amountadd").val())||1); i++) { 
        order.push(items[ticket-3]);
        }
        //-3 is because the array (at the top of the code) has keys 0,1,2 and the items have numbers 3,4,5.
    };
document.frm.display.value = order.join(" + ");

//Remove Function
    for (i = 0; i < (Number($("#amountrem").val())||1); i++) {
        if (order.indexOf(items[ticket-3]) > -1) {
            order.splice(order.lastIndexOf(items[ticket-3]),1);
        }
    }
    document.frm.display.value = order.join(" + ");

最终版本：https://jsfiddle.net/xb8hLmsr/5/
带边框半径和标题的版本（也缺少一些脚本修改;如果你使用它，我建议从第一个链接复制JavaScript）：https://jsfiddle.net/xb8hLmsr/2/

希望这就是你要找的东西！

如何配置此jquery和javascript计算器？

1 个答案: