Javascript 如何阻止函数在用Jquery制作的计算器中运行_Javascript_Html_Jquery_Css_Function

Javascript 如何阻止函数在用Jquery制作的计算器中运行

javascript html jquery css function

Javascript 如何阻止函数在用Jquery制作的计算器中运行,javascript,html,jquery,css,function,Javascript,Html,Jquery,Css,Function,所以我遇到了一个问题---- 我点击一个数字，它会打印（函数numberone）。我点击一个操作符（.operators类[.multiply、.divide、.减号、.plus]）。问题就从这里开始。我点击另一个号码（功能号码wo）。数字打印在数字1部分和数字2部分下面是代码： JS小提琴手： Plzz修复我的代码。。。❤ 我的代码是，如果您需要： <html> <head> <script src="https://code.jquer

所以我遇到了一个问题---- 我点击一个数字，它会打印（函数numberone）。我点击一个操作符（.operators类[.multiply、.divide、.减号、.plus]）。问题就从这里开始。我点击另一个号码（功能号码wo）。数字打印在数字1部分和数字2部分下面是代码： JS小提琴手：

Plzz修复我的代码。。。❤ 我的代码是，如果您需要：

<html>
<head>

    <script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>

    <title>Calculator</title>
    <style>
        .modulus,
        .equal,
        .plus,
        .minus,
        .divide,
        .multiply{

            width: 57px;
            height: 43px;
            background-color: gold;
            color: black;
            margin: 5px;
            text-align: center;
            border: none;
            font-weight: bold;

        }
        .zero,
        .nine,
        .eight,
        .seven,
        .six,
        .five,
        .four,
        .three,
        .two,
        .one{
            width: 57px;
            height: 43px;
            background-color: black;
            color: white;
            margin: 5px;
            text-align: center;
            font-weight: bold;

        }
        .display{
            border: 1px black solid;
            width: 268px;
            height: 45px;
            margin-left: 5px;
            background-color: black;
            color: white;
            font-weight: bold;
            margin-bottom: 3px;
        }
    </style>
</head>
<body>

    <div>
        <div class="display">   
            <span class="num1"></span>
            <span class="operator"></span>
            <span class="num2"></span>
        </div>
        <button class="one">1</button>
        <button class="two">2</button>
        <button class="three">3</button>
        <button class="multiply">x</button>
        <br>
        <button class="four">4</button>
        <button class="five">5</button>
        <button class="six">6</button>
        <button class="plus">+</button>
        <br>
        <button class="seven">7</button>
        <button class="eight">8</button>
        <button class="nine">9</button>
        <button class="minus">-</button>
        <br>
        <button class="zero">0</button>
        <button class="equal">=</button>
        <button class="modulus">%</button>
        <button class="divide">/</button>
    </div>
    <script>
        if ($('.operator').is(':empty')){
            numberone();
        }

        $('.minus').click(function(){
            $(".operator").append("-");
            numbertwo();

        });

        $('.multiply').click(function(){
            $(".operator").append("x");
            numbertwo();
        });

        $('.divide').click(function(){
            $(".operator").append("÷");
            numbertwo();
        });

        $('.plus').click(function(){
            $(".operator").append("+");
            numbertwo();

        });
        
    function numberone(){
        $('.one').click(function(){
            $(".num1").append(1);
        });

        $('.two').click(function(){
            $(".num1").append(2);
        });

        $('.three').click(function(){
            $(".num1").append(3);
        });

        $('.four').click(function(){
            $(".num1").append(4);
        });

        $('.five').click(function(){
            $(".num1").append(5);
        });

        $('.six').click(function(){
            $(".num1").append(6);
        });

        $('.seven').click(function(){
            $(".num1").append(7);
        });

        $('.eight').click(function(){
            $(".num1").append(8);
        });

        $('.nine').click(function(){
            $(".num1").append(9);
        });
    }





        function numbertwo(){
        $('.one').click(function(){
            $(".num2").append(1);
        });

        $('.two').click(function(){
            $(".num2").append(2);
        });

        $('.three').click(function(){
            $(".num2").append(3);
        });

        $('.four').click(function(){
            $(".num2").append(4);
        });

        $('.five').click(function(){
            $(".num2").append(5);
        });

        $('.six').click(function(){
            $(".num2").append(6);
        });

        $('.seven').click(function(){
            $(".num2").append(7);
        });

        $('.eight').click(function(){
            $(".num2").append(8);
        });

        $('.nine').click(function(){
            $(".num2").append(9);
        });
    }

    </script>
</body>
</html>```


计算器
.模数，
.平等，
.另外，
减
分
.乘{
宽度：57px；
高度：43px；
背景颜色：金色；
颜色：黑色；
保证金：5px；
文本对齐：居中；
边界：无；
字体大小：粗体；
}
.零，
.9，
.8，
.7，
.6，
.5，
.4，
.3，
.2，
.一{
宽度：57px；
高度：43px；
背景色：黑色；
颜色：白色；
保证金：5px；
文本对齐：居中；
字体大小：粗体；
}
.展示{
边框：1px黑色实心；
宽度：268px；
高度：45px；
左边距：5px；
背景色：黑色；
颜色：白色；
字体大小：粗体；
利润底部：3倍；
}
1.
2.
3.
x


4.
5.
6.
+


7.
8.
9
-


0
=
%
/
如果（$（'.operator'）。是（':empty'））{
numberone（）；
}
$（'.减号'）。单击（函数（）{
$（“.operator”）。追加（“-”；
数字wo（）；
});
$（'.multiply'）。单击（函数（）{
$（“.operator”）.append（“x”）；
数字wo（）；
});
$（'.divide'）。单击（函数（）{
$（“.operator”）。追加（÷”）；
数字wo（）；
});
$（'.plus'）。单击（函数（）{
$（“.operator”）。追加（“+”）；
数字wo（）；
});
函数numberone（）{
$（'.one'）。单击（函数（）{
$（“.num1”）。追加（1）；
});
$（'.two'）。单击（函数（）{
$（“.num1”）。追加（2）；
});
$（'.three'）。单击（函数（）{
$（“.num1”）。追加（3）；
});
$（'.four'）。单击（函数（）{
$（“.num1”）。追加（4）；
});
$（'.five'）。单击（函数（）{
$（“.num1”）。追加（5）；
});
$（'.six'）。单击（函数（）{
$（“.num1”）。追加（6）；
});
$（'.seven'）。单击（函数（）{
$（“.num1”）。追加（7）；
});
$（'.8'）。单击（函数（）{
$（“.num1”）。追加（8）；
});
$（'.nine'）。单击（函数（）{
$（“.num1”）。追加（9）；
});
}
函数号wo（）{
$（'.one'）。单击（函数（）{
$（“.num2”）。追加（1）；
});
$（'.two'）。单击（函数（）{
$（“.num2”）。追加（2）；
});
$（'.three'）。单击（函数（）{
$（“.num2”）。追加（3）；
});
$（'.four'）。单击（函数（）{
$（“.num2”）。追加（4）；
});
$（'.five'）。单击（函数（）{
$（“.num2”）。追加（5）；
});
$（'.six'）。单击（函数（）{
$（“.num2”）。追加（6）；
});
$（'.seven'）。单击（函数（）{
$（“.num2”）。追加（7）；
});
$（'.8'）。单击（函数（）{
$（“.num2”）。追加（8）；
});
$（'.nine'）。单击（函数（）{
$（“.num2”）。追加（9）；
});
}
```

您的代码有问题：您最初为

单击事件绑定了numberone
。当用户按下运算符时，您将绑定另一个函数numbertwo
。现在，第一个函数尚未解除绑定。这就是为什么numberone
和numbertwo
都被执行的原因。除此之外，为每个按钮编写函数并不是一个好方法。可以使用包装文本，也可以向元素添加数据属性
解决方案：请注意，我为数字元素指定了一个类num
。我只绑定了一个单击事件。当单击.num
元素时，它会检查num1
元素内是否已经有一些内容。除此之外，它还会检查操作员按钮是否被按下。如果两个条件都满足，则在.num2
中追加文本，否则在num1
中追加值

var operatorFlag=false；
$（'.减号'）。单击（函数（）{
$（“.operator”）。追加（“-”；
operatorFlag=true；
});
$（'.multiply'）。单击（函数（）{
$（“.operator”）.append（“x”）；
operatorFlag=true；
});
$（'.divide'）。单击（函数（）{
$（“.operator”）。追加（÷”）；
operatorFlag=true；
});
$（'.plus'）。单击（函数（）{
$（“.operator”）。追加（“+”）；
operatorFlag=true；
});
$（'.num'）。单击（函数（）{
var值=$（this.text（）；
var文本；
if（$（'.num1'）.text（）.trim（）&&operatorFlag）{
text=$（'.num2'）。追加（值）；
}否则{
$（'.num1'）。追加（值）；
}
});
.modules，
.平等，
.另外，
减
分
.乘{
宽度：57px；
高度：43px；
背景颜色：金色；
颜色：黑色；
保证金：5px；
文本对齐：居中；
边界：无；
字体大小：粗体；
}
纳姆先生{
宽度：57px；
高度：43px；
背景色：黑色；
颜色：白色；
保证金：5px；
文本对齐：居中；
字体大小：粗体；
}
.展示{
边框：1px黑色实心；
宽度：268px；
高度：45px；
左边距：5px；
背景色：黑色；
颜色：白色；
字体大小：粗体；
文科硕士