Javascript 如何跟踪jquery中按下的按钮_Javascript_Jquery_Html

Javascript 如何跟踪jquery中按下的按钮

javascript jquery html

Javascript 如何跟踪jquery中按下的按钮,javascript,jquery,html,Javascript,Jquery,Html,我想只使用jquery创建简单的计算器。当我试图从列表name=numbers中跟踪按下哪个按钮时，它会显示第一个按钮的值。例如，我经常得到1 <html> <head> <script type="text/javascript" src="Z:\ПИ-313\2 подгруппа\Баталова Шаниязов\Веб - технологии\Веб - технологии\jquery-3.3.1.min.js"></scrip

我想只使用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>

你需要使用$this来点击按钮

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

我就是这样修好的。替换此项：

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

据此：

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

错误在于，在您的事件中，您总是得到第一个元素，而不是单击的元素。第二，您只是设置检索到的数据的值，而不是与已经存在的数据连接

这是因为使用“：button[name=numbers]”可以选择名称为numbers的所有按钮，在代码段中，这意味着所有按钮。得到第一个值：1

在Javascript中，您可以看到这个。在单击功能中，这是“单击的项目”。在本例中，由于您需要“单击的项目”的值，因此是完美的：

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

小小的代码回顾，这就是我所做的：

将总和移出单击。您现在可以使用它进行其他计算，而无需从DOM中选择它我使用了this.value而不是$this.val。jQuery在内部也做同样的事情，我们只是直接做。在可能的情况下使用本机javascript通常会更快、更轻量级。我只是直接在.val函数中添加了值。这将在保持可读性的同时为您保存一行代码，而您现在不会将其保存在内存中。这是一个很小的值，但是做1000次，你会感觉到不同。如果必须将其保存在变量中，请使用let而不是var和googlewhy：您使用name=并给它们取相同的名称。它们必须是独一无二的。我想你在找课=

这是因为他们有相同的名字。名称必须是唯一的。根据您的需要，您应该使用class属性；