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

【问题标题】：How to Stop A function From Running In A calculator Made With Jquery如何阻止函数在使用 Jquery 制作的计算器中运行
【发布时间】：2020-10-11 02:46:36
【问题描述】：

所以我有一个问题，无论何时---- 我单击一个数字，它会打印 (function numberone) 。我点击一个 operator(.operators class[.multiply, .divide, .minus, .plus]) 。所以问题从这里开始。我单击另一个数字（函数 numbertwo）。 NUMBER1 部分和 NUMBER2 部分都印有数字所以这是代码： JS FIDDLE：https://jsfiddle.net/idk_anything_pro/g53bsvm9/1/

请修复我的代码...❤ 我的代码是如果你想要的话：

<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>```

【问题讨论】：

标签： javascript html jquery css function

【解决方案1】：

您的代码有问题：您最初为click 事件绑定了numberone。当用户按下一个操作符时，你绑定了另一个函数numbertwo。现在，第一个函数还没有被解除绑定。这就是为什么numberone 和numbertwo 都被执行的原因。除此之外，为每个按钮编写一个函数并不是一个好方法。您可以使用换行文本，也可以向元素添加数据属性。

解决方案： 请注意，我已为数字元素分配了一个类 num。我只绑定了一个click 事件。单击.num 元素时，它会检查num1 元素内是否已经存在一些内容。除此之外，它还会检查是否按下了操作员按钮。如果两个条件都满足，则在.num2 中附加文本，否则在num1 中附加值。

var operatorFlag = false;

$('.minus').click(function() {
  $(".operator").append("-");
  operatorFlag = true;

});

$('.multiply').click(function() {
  $(".operator").append("x");
  operatorFlag = true;
});

$('.divide').click(function() {
  $(".operator").append("÷");
  operatorFlag = true;
});

$('.plus').click(function() {
  $(".operator").append("+");
  operatorFlag = true;

});

$('.num').click(function() {
  var value = $(this).text();
  var text;
  if ($('.num1').text().trim() && operatorFlag) {
    text = $('.num2').append(value);
  } else {
    $('.num1').append(value);
  }
});

.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;
}

.num {
  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;
}

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


<div>
  <div class="display">
    <span class="num1"></span>
    <span class="operator"></span>
    <span class="num2"></span>
  </div>
  <button class="one num">1</button>
  <button class="two num">2</button>
  <button class="three num">3</button>
  <button class="multiply">x</button>
  <br>
  <button class="four num">4</button>
  <button class="five num">5</button>
  <button class="six num">6</button>
  <button class="plus">+</button>
  <br>
  <button class="seven num">7</button>
  <button class="eight num">8</button>
  <button class="nine num">9</button>
  <button class="minus">-</button>
  <br>
  <button class="zero num">0</button>
  <button class="equal">=</button>
  <button class="modulus">%</button>
  <button class="divide">/</button>
</div>

【讨论】：