如何在Jquery中设置每个按钮的功能？

Question

我正在尝试使用计算器(reverse Polish Notation)JQuery, HTML, CSS.

我有[ 0~9 NUMBER BUTTONS]和[ +,-,=,/ OPERATOR BUTTONS],需要确保它们的工作方式不同.但是,我想向他们展示[ input textbox.]

那么如何设置每个按钮的事件处理程序Jquery？你有什么好主意吗？我应该只使用If, else if, else..？

$(document).ready(function() {
    $('button').click(function(){

        var showMessage = $(this).attr("value");
        console.log(showMessage);
        if(showMessage!="Clear"){ // ??? ???
             $('#showProcess').val(function(n,c){
                return c+showMessage;
            });
        }
        else if(showMessage=="Clear"){
            $('#showProcess').val(""); // Clear
        }
    });

$('button').hover( // ?? hover ?? ?? ??
function(){
    $(this).addClass('active');
},
function(){
    $(this).removeClass('active');   
}
);
});

Answer 1

看起来你所做的就是为选择器'button'创建一个事件处理程序(它将选择页面上的每个按钮),然后你会检查按下了哪个按钮.这是对此的类比.这就像订购Pepporoni比萨饼一样,但比萨饼家伙在烹饪了各种比萨饼后来到你家,后来问你想要哪一个.

更好的做法是只选择要添加特定事件处理程序的确切按钮.有很多方法可以做到这一点,但这是一个简单的例子.

'button.digit'选择匹配类'digit'的每个按钮.

<button class="digit" value="5">5</button>

例如,

$('button.digit').click(function() {
    var digitPressed = parseInt($(this).attr('value'));
    // perform desired actions
    // stack.push(digitPressed);
});

$('button.operand-plus').click(function() {
    var opPressed = $(this).attr('value');
    // perform desired action for 'Plus' button
    // stack.push(opPressed);
});

当然,您也可以使用jQuery内联数据或从innerHTML读取数字的值.

试试这个简单的例子:https: //jsfiddle.net/228gp9wc/