Javascript/HTML 按钮未显示

Question

我正在尝试创建一个 windows 计算器的副本，只是为了练习 jquery 和 Javascript（当然是基本的）。我已经创建了所有 html 按钮。现在我试图在点击时显示数字。显然，单击时仅显示“1”。其他号码不显示。

$("button").attr("class") 仅适用于第一个按钮

我确实利用

使所有按钮都起作用

$(this).on("click", ".0", function() {
        var store=$(".draft").val().concat($(".0").val());
        $(".draft").val(store);
      });

但这意味着我需要为所有无效的数字重复此代码...

我怎样才能有效地让它为其他数字工作？

<script>
$(document).ready(function() {
        $(this).on("click", "."+$("button").attr("class"), function() {
            var store=$(".draft").val().concat($("."+$("button").attr("class")).val());
            $(".draft").val(store);
        });
</script>

<input class="draft" type="text" style="height: 25px; width: 250px"/> <br> <br>
<button class="1" value="1" enabled style="position: center; height: 50px; width: 50px">1</button>
<button class="2" value="2" enabled style="height: 50px; width: 50px">2</button>
<button class="3" value="3" enabled style="height: 50px; width: 50px">3</button> 
<button class="divide" value="/" enabled style="height: 50px; width: 50px">÷</button> <br>
<button class="4" value="4" enabled style="height: 50px; width: 50px">4</button>
<button class="5" value="5" enabled style="height: 50px; width: 50px">5</button>
<button class="6" value="6" enabled style="height: 50px; width: 50px">6</button> 
<button class="multiply" value="*" enabled style="height: 50px; width: 50px">*</button> <br>
<button class="7" value="7" enabled style="height: 50px; width: 50px">7</button>
<button class="8" value="8" enabled style="height: 50px; width: 50px">8</button>
<button class="9" value="9" enabled style="height: 50px; width: 50px">9</button> 
<button class="subtract" value="-" enabled style="height: 50px; width: 50px">-</button> <br>
<button class="0" value="0" enabled style="height: 50px; width: 50px">0</button>    
<button class="plusminus" value="-" enabled style="height: 50px; width: 50px">+/-</button>
<button class="dot" value="." enabled style="height: 50px; width: 50px">.</button> 
<button class="add" value="+" enabled style="height: 50px; width: 50px">+</button> 
<button class="equal" value="=" enabled style="height: 50px; width: 50px">=</button>

Answer 1

使用 jquery 访问您要定位的特定按钮。

$("button")

将 return 您 DOM 中的第一个按钮。相反，按 class 或 ID:

定位

$(".1") //targets the element with a class of '1'

对于你的问题，你可以通过'this'获取按钮的值：

$("button").on("click", function() {
  var value = $(this).val()
  // do something with value

});

Answer 2

我想把它放在一个 each 中，例如

 $.each($("button"),function(){
     $(this).attr("class");
 })

或

 $("button").each(function(){
     $(this).attr("class");
 })

Answer 3

我认为最好的选择是为每个按钮使用相同的 class 名称，然后使用 $(this) 选项读取值。

这里我用你的代码创建了一个简单的例子。这只是您的代码，稍作更改。

JSBin Example

Answer 4

最好使用连接到父元素的单个委托事件处理程序。这比连接处理程序负载更有效：

$(function () {
    $('.calculator').on("click", "button", function () {
        // Do something with the value of the clicked button...
        $(".draft").val($(".draft").val() + $(this).val());
    });
});

JSFiddle: http://jsfiddle.net/TrueBlueAussie/cf8csjw1/

它的工作原理是侦听事件冒泡到祖先元素，然后应用 jQuery 选择器，然后为首先导致事件的元素调用您的函数。

Javascript/HTML 按钮未显示

Javascript/HTML Button Not Showing

html

javascript

jquery

calculator