需要修改 Javascript/Jquery 才能正常工作吗？

Question

我有以下代码:

function $(id) {
    return document.getElementById(id);   
}
var material = $("material");
var materialPrices = {"invalid": "from £800.00","1": "£1,200.00","2": "£800.00","3": "£800.00"};
var price = 0;
function update() {
    $(".block").animate( { backgroundColor: '#B5D8EA' }, 500);
    price = materialPrices[material.options[material.selectedIndex].value];
    document.getElementById('pprice').innerHTML = price;    
}
material.onchange = update;

基本上在 $(".block").animate( { backgroundColor: '#B5D8EA' }, 500); 行中返回 $(".block")当从下拉选择框中选择一个值时，> 为 null。有人告诉我，它与: function $(id) 有关，但不知道应该如何修改我的代码才能使其全部正常工作，请任何人帮忙，我的 js 很弱! !

谢谢

Answer 1

由于您已经创建了 $(id) 函数 $(".block") 将调用该方法，该方法将查找 elementById 并且不会找到任何内容。因此 $(".block") 为 null，并且您在 null 对象上调用 animate 方法，这将引发异常。

试试这个

//Remove this method
/*
function $(id) {
                return document.getElementById(id);   
            }
*/
            var material = $("#material");
            var materialPrices = {"invalid": "from £800.00","1": "£1,200.00","2": "£800.00","3": "£800.00"};
            var price = 0;

            material.change(function() {
                $(".block").animate( { backgroundColor: '#B5D8EA' }, 500);
                price = materialPrices[material.options[material.selectedIndex].value];
                $('#pprice').html(price);    
            })

;