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

Вы лучше с помощью одного делегированного обработчика событий, связанных с родительским элементом. Это более эффективно, чем подключение нагрузки обработчиков:

$(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, затем вызвать вашу функцию для элемента, вызвавшего событие в первую очередь.

Answer 2

Используйте jquery для доступа к определенной кнопке, на которую вы хотите настроить таргетинг.

$("button") 

вернет первую кнопку в вашем DOM. Вместо этого, цель классом или ID:

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

Для вашей проблемы, вы можете получить значение кнопки с помощью «это»:

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

}); 

Answer 3

Я думаю поместить его в каждый, например

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

или

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

Answer 4

Я думаю, что лучшим вариантом является использование одного и того же имени класса для каждой кнопки, после чего с помощью параметра $ (this) для чтения значения.

Здесь я создал простой пример с вашим кодом. Это только ваш код с несколькими изменениями.

JSBin Example