Question

所以我有这个javascript代码：

var a = 7;
function addNumber(Number) {
    document.getElementById("display").value = 
    document.getElementById("display").value + Number;
}
function calculate() {
    a = eval(document.getElementById("display").value);
    document.getElementById("display").value = a;
}
function erase() {
    document.getElementById("display").value = '';
}

我做了这个jquery，但它不起作用

var $j = jQuery.noConflict();
$j( document ).ready(function() {
    var a = 7;
    function addNumber(Number) {
        $j( "#display").attr( "value", ( $j( "#display").val() + Number ));
    }
    function calculate() {
        a = eval($j( "#display").val());
        $j( "#display").attr( "value", a)
    }
    function erase() {
        $j( "#display").attr( "value", '');
    }
});

jsfiddle上的完整代码在这里：https://jsfiddle.net/8z6vgnqk/

Answer 1

不要将您的功能放在$(document).ready()内。由于您是从onclick属性调用它们，因此它们必须位于全局范围内，但是您将它们放在函数中，因此它们的范围是该函数的本地范围。

在jsfiddle上，您还必须从框架菜单中选择No wrap，这样它们就不会被放入window.onload函数中。

var $j = jQuery.noConflict();

var a = 7;

function addNumber(Number) {
    $j("#display").attr("value", ($j("#display").val() + Number));
}



function calculate() {
    a = eval($j("#display").val());
    $j("#display").attr("value", a)
}

function erase() {
    $j("#display").attr("value", '');
}

FIDDLE

Answer 2

这是一种更好的工作方式：

<div class="header">
    <input name="1" id="display" value="" disabled>
</div>
<div class="numberFields">
    <input type="button" name="1" value="1" onclick="alert(1);addNumber('1')"/>
    <input type="button" name="2" value="2" onclick="addNumber('2')"/>
    <input type="button" name="3" value="3" onclick="addNumber('3')"/>
    <input type="button" name="4" value="4" onclick="addNumber('4')"/>
    <input type="button" name="5" value="5" onclick="addNumber('5')"/>
    <input type="button" name="6" value="6" onclick="addNumber('6')"/>
    <input type="button" name="7" value="7" onclick="addNumber('7')"/>
    <input type="button" name="8" value="8" onclick="addNumber('8')"/>
    <input type="button" name="9" value="9" onclick="addNumber('9')"/>
    <input type="button" name="0" value="0" onclick="addNumber('0')"/>
    <input type="button" name="." value="." onclick="addNumber('.')"/>
    <input type="button" name="C" value="C" onclick="erase()"/>
</div>
<div class="operations">
    <input type="button" name="+" value="+" onclick="addNumber('+')"/>
    <input type="button" name="-" value="-" onclick="addNumber('-')"/>
    <input type="button" name="*" value="*" onclick="addNumber('*')"/>
    <input type="button" name="/" value="/" onclick="addNumber('/')"/>
</div>
<div class="sum">
    <input type="button" name="=" value="=" onclick="calculate()"/>
</div>

<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
<script>

    var display = $("#display");

    function addNumber(num) {
        display.val(display.val() + num);
    }

    function calculate() {
        var anwser = eval(display.val());
        display.val(anwser);
    }

    function erase() {
        display.val("");
    }

</script>

我不确定你的小提琴是怎么回事，所以我把代码撕掉了，把它全部放在一个地方。

关于代码的一些注释......

不需要document.ready，因为在您单击按钮之前，您不会访问DOM。
而不是$("#display").attr("value")，请使用$("#display").val()
如果您再次重复使用同一个选择器，请分配一次，然后在var display = $("#display");上使用该变量，然后使用display.val("");

从javascript转换为jquery

2 个答案: