Question

大约一周前，我开始学习jQuery，因此，为了测试我的知识，我创建了一个jQuery计算器，除退格按钮外，其他所有功能都正确

我尝试过

if (value === backspace) {
$(input).val($(input).val().substring(0, $(input).val().length - 1));

}

但这不起作用

这是我的html

<!DOCTYPE html>
<html>
    <head>
        <title>Calculator</title>
        <link rel="stylesheet" type="text/css" href="calculator.css">
    </head>
    <body>
        <div class="container">
            <input type="text" name="">
            <div class="btns">
                <input type="submit" name="btn1" value="1">
                <input type="submit" name="btn2" value="2">
                <input type="submit" name="btn3" value="3">
                <input type="submit" name="btn4" value="4">
                <input type="submit" name="btn5" value="5">
                <input type="submit" name="btn6" value="6">
                <input type="submit" name="btn7" value="7">
                <input type="submit" name="btn8" value="8">
                <input type="submit" name="btn9" value="9">
                <input type="submit" name="btn0" value="0">
                <input type="submit" name="plus" value="+">
                <input type="submit" name="minus" value="-">
                <input type="submit" name="mulpy" value="*">
                <input type="submit" name="div" value="/">
                <input type="submit" name="mod" value="%">
                <input type="submit" name="div" value="=">
                <input type="submit" name="reset" value="reset">
                <input type="submit" name="back" value="&larr;">
            </div>
        </div>
        <script
        src="https://code.jquery.com/jquery-3.4.1.min.js"
        integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
        crossorigin="anonymous"></script>
        <script type="text/javascript" src="calculator.js"></script>
    </body>
</html>

这是CSS

body {
margin: 0;
padding: 0;
box-sizing: border-box;
display: flex;
justify-content: center;
align-items: center;
background: #45D196;
background: -moz-linear-gradient(left, #45D196 0%, #1C6EA4 44%, #A6C55F 100%);
background: -webkit-linear-gradient(left, #45D196 0%, #1C6EA4 44%, #A6C55F 100%);
background: linear-gradient(to right, #45D196 0%, #1C6EA4 44%, #A6C55F 100%);
}

.container {
width: 300px;
margin-top: 100px;
border-radius: 5px;
-webkit-box-shadow: 5px 5px 15px 5px rgba(0,0,0,0.25); 
box-shadow: 5px 5px 15px 5px rgba(0,0,0,0.25);
}

.btns,
.container {
    display: flex;
    flex-wrap: wrap;
}


input[type = "submit"] {
cursor: pointer;
width: 100px;
height: 50px;

}

input[type = "text"] {
width: 100%;
height: 50px;
font-size: 30px;
outline: none;
border-top-right-radius: 5px;
border-top-left-radius: 5px;
border: 1px solid #45D196;
}

和Javascript



$( document ).ready(function() {


let input= $('input[type="text"]');

$(".btns").click(function(e) {
let $current_val = $(input).val();
let value = $(e.target).val();
$(input).val($current_val + value);
let backspace = $("input:last-child").val();

if (value === "reset") {
$(input).val("");

}

if (value === "=") {
let answer = eval($current_val);
$(input).val("");
$(input).val(answer);   
}

if (value === backspace) {
$(input).val($(input).val().substring(0, $(input).val().length - 1));

}






});





});

预先感谢

Answer 1

您要在显示屏上添加字符的代码在退格键之前触发，因此您要在显示屏上添加退格字符，然后立即将其删除。您可以将$(input).val($(input).val().substring(0, $(input).val().length - 1))更改为$(input).val($(input).val().substring(0, $(input).val().length - 2))，以消除退格和最后一个数字，但是重组代码可能更有意义。代替一系列if语句，请尝试检查if-else链中的特殊操作，以默认操作结尾。像这样

let value = $(e.target).val();
let backspace = $("input:last-child").val();
let $current_val = $(input).val();


if (value === "reset") {
    $(input).val("");

} else if (value === "=") {
    let answer = eval($current_val);
    $(input).val("");
    $(input).val(answer);
} else if (value === backspace) {
    $(input).val($(input).val().substring(0, $(input).val().length - 1));
} else {
    $(input).val($current_val + value);
}

如何使用jQuery添加退格按钮

1 个答案: