jquery计算器思路

Question

写个计算器，没有思路，大哥们帮帮忙！！！
我是利用class给所有的按钮添加点击事件呢还是根据ID一个个添加，如何用class给所有按钮添加，那么后面该怎么办！

    <!--第一排-->
    <input type="button" id="7" value="7" class="buttons"/>
    <input type="button" id="8" value="8" class="buttons"/>
    <input type="button" id="9" value="9" class="buttons"/>
    <input type="button" id="Back" value="Back" class="buttons"/>
    <input type="button" id="C" value="C" class="buttons" style="margin-right:0px"/>
    <!--第二排-->
    <input type="button" id="4" value="4" class="buttons"/>
    <input type="button" id="5" value="5" class="buttons"/>
    <input type="button" id="6" value="6" class="buttons"/>
    <input type="button" id="*" value="x" class="buttons"/>
    <input type="button" id="/" value="/" class="buttons" style="margin-right:0px"/>
    <!--第三排-->
    <input type="button" id="1" value="1" class="buttons"/>
    <input type="button" id="2" value="2" class="buttons"/>
    <input type="button" id="3" value="3" class="buttons"/>
    <input type="button" id="+" value="+" class="buttons"/>
    <input type="button" id="-" value="-" class="buttons" style="margin-right:0px"/>
    <!--第四排-->
    <input type="button" id="0" value="0" class="buttons"/>
    <input type="button" id="00" value="00" class="buttons"/>
    <input type="button" id="." value="." class="buttons"/>
    <input type="button" id="%" value="%" class="buttons"/>
    <input type="button" id="eva" value="=" class="buttons" style="margin-right:0px"/>

Answer 1

class加呀

 <div class="box">
            <p></p>
            <p></p>
</div>
        
         var btns = document.querySelectorAll('input.buttons'),
        text = document.querySelectorAll('.box p'),
        arr = [],
        Result;
        [].slice.call(btns).forEach(function(element) {
            element.onclick = function(){                                     
               if(this.value === '='){
                Result = eval('('+arr.join('')+')');
                arr  = []; 
                text[1].innerText = Result;  
               }else{
                    text[0].innerText = '';
                    if(this.value === 'C'){
                        arr = [];
                        return; 
                    }    
                    if(this.value === 'Back'){
                        arr.pop();
                    }else{
                        arr.push(this.value);
                    }                                             
                    arr.map(function(num){
                        text[0].innerText += num;
                    });
               }
            }
        });

有其余的特殊键，你判断一下this.value处理一下就行了

Answer 2

原生js和jquery并不冲突啊，jquery只是辅助工具，楼上的老哥提供的代码很棒，如果要用jquery可以这么写

var btns=$("input .class");
btns.click(function(event) {
 console.log(event.currentTarget.val());
});

Answer 3

我给你html添加了两个显示的span

输入的字符:<span class="txt"></span><br/>
结果:<span class="Result"></span><br/>

$(function() {
        $(".buttons").click(function () {
            var $value = this.value;
            var str = $(".txt").html();
            if ($value=="=") {
                getResult();
                return;
            }
            if ($value == "Back") {
                $(".txt").html(str.substr(0, str.length - 1));
                return;
            }
            if ($value == "C") {
                $(".txt").html("");
                return;
            }
            $(".txt").html(str + $value);
        });
    });
    function getResult() {
        $(".Result").html(eval($(".txt").html()));
    }

大概就是这样了 不确定有什么bug 对了 你把X的value改为*吧 不然不识别