Question

我想只使用jquery创建简单的计算器。当我尝试跟踪列表中的哪个按钮（name=numbers）时，它会显示第一个按钮的值。例如，我经常得到1

<html>
<head>
    <script type="text/javascript" src="Z:\ПИ-313\2 подгруппа\Баталова Шаниязов\Веб  - технологии\Веб - технологии\jquery-3.3.1.min.js"></script>
</head>
<body>
    <div>
        <input id="field" type="text"/>
        <input type="button" value="<<">
        <input type="button" value="C">
    </div>
    <div>
        <button name="numbers" value="1">1</button>
        <button name="numbers" value="2">2</button>
        <button name="numbers" value="3">3</button>
        <input type="button" value="+">
    </div>
    <div>
        <input type="button" name="numbers" value="4">
        <input type="button" name="numbers" value="5">
        <input type="button" name="numbers" value="6">
        <input type="button" value="-">
    </div>
    <div>
        <input type="button" name="numbers" value="7">
        <input type="button" name="numbers" value="8">
        <input type="button" name="numbers" value="9">
        <input type="button" value="*">
    </div>
    <div>
        <input type="button" name="numbers" value="0">
        <input type="button" value=",">
        <input type="button" value="/">
    </div>
    <div>
        <button id="calc">=</button>
    </div>
    <script>
        $(document).ready(function(){
            $(':button[name=numbers]').click(function() {
                var number = $(':button[name=numbers]').val();
                $('#field').val(number);
            });
        });
    </script>
</body>

Answer 1

这是因为您使用':button[name=numbers]'选择名称为numbers的所有按钮，在您的代码段中，这些按钮表示所有按钮。你得到第一个值：1。

在Javascript中，您有 this 。在click()函数this中，'项目已点击'。在这种情况下完美，因为你想要'点击项目'的价值：

var totalSum = Number( $('#field').val() ); // easier to save if outside the click;
$(':button[name="numbers"]').click(function() {
    $('#field').val( totalSum + this.value);
});

代码审查很少，这就是我所做的：

将totalSum移出点击。您现在可以使用它进行其他计算，而无需从DOM中选择它
我使用this.value代替$(this).val()。 jQuery内部做同样的事情，我们直接做。在可能的情况下使用原生javascript通常会更快，更轻量。
我刚刚在.val()函数中添加了该值。这将为您节省一行代码（同时保持可读性），而您现在不会将其保存在内存中。这是一个很小的价值，但这样做1000次，你会感觉到差异。如果您必须将其保存在变量中，请使用let代替var（以及Google为什么:)）
您使用name=并为他们提供相同的名称。它们必须是独一无二的我想你正在寻找class=

Answer 2

您需要使用$(this)来获取点击的按钮

$(document).ready(function(){
      $(':button[name=numbers]').click(function() {
          var number = $(this).val();
          $('#field').val(number);
      }); 
 });

Answer 3

这就是我修复它的方法。替换这个：

var number = $(':button[name=numbers]').val();
$('#field').val(number);

由此：

var number = $(this).val();
$('#field').val($('#field').val() + number);

错误在于，在您的活动中，您总是得到第一个元素而不是被点击的元素。其次，您只需设置检索数据的值，而不是与已存在的数据连接。

Here is the JSfiddle demo

如何跟踪按下jquery的按钮

3 个答案: