Jquery,ajax,javascript - 通过id获取元素

时间:2012-12-22 02:19:08

标签: javascript jquery

我有一些ajax onclick东西,当从菜单中选择值时更新此行:

<li id="li_273" data-pricefield="special" data-pricevalue="0" >

目的是获取该值(data-pricevalue),然后将其乘以从另一个输入框输入的金额。这是我尝试实现这一目标的功能:

$('#main_body').delegate('#element_240','keyup', function(e){

var temp = $(this).attr("id").split('_');
var element_id = temp[1];

var price = $('#li_273').data("pricevalue"); 

var ordered = $(this).val();

var price_value = price * ordered;

price_value = parseFloat(price_value);
if(isNaN(price_value)){
    price_value = 0;
}

$("#li_273").data("pricevalue",price_value);
calculate_total_payment();  

});

除了我收到以下错误: 未捕获的TypeError:无法调用null

的方法'data'

似乎我试图从getElementById中获取价格值是不正确的。有什么建议吗?

更新:上述代码已根据您的建议进行了编辑,并感谢所有人。它现在似乎工作得很好。

7 个答案:

答案 0 :(得分:5)

这部分错了:

var price = document.getElementById('#li_273').data("pricevalue").val();

相反,你应该一直使用jQuery:

var price = $('#li_273').data("pricevalue"); 

顺便说一下,你不应该使用.val(),因为.data()已经返回一个字符串。 .val()专门用于输入元素,例如<input><select>等。

<强>更新

此外,您的其余代码应该是这样的:

var price_value = parseFloat(price);
if(isNaN(price_value)){
    price_value = 0;
}

答案 1 :(得分:3)

getElementById不返回它只返回普通DOM对象的jQuery对象。

您可以在jQuery调用中包装任何DOM对象,以将其作为jQuery对象:

 $(document.getElementById("li_273")).data("pricevalue").val();

或者更好的是只使用jQuery

 $("#li_273").data("pricevalue").val()

答案 2 :(得分:2)

你的调用应该是document.getElementById('li_273')这是一个普通的方法,并不像jQuery那样需要散列。

编辑正如@kennypu指出你在非jQuery对象上使用jQuery。 @Craig拥有最佳解决方案。

答案 3 :(得分:1)

你的getElementById是错误的javascript你不需要#,如果你使用jQuery这样做(我也删除了.val(),因为它不需要):

$('#main_body').delegate('#element_240','keyup mouseout change', function(e){

    var temp = $(this).attr("id").split('_');
    var element_id = temp[1];

    var price = $('#li_273').data("pricevalue");

    var ordered = $(this).val();

    price_value = parseFloat(price_value);
    if(isNaN(price_value)){
        price_value = 0;
    }

    $("#li_273").data("pricevalue",price_value);
    calculate_total_payment();          
}); 

答案 4 :(得分:1)

document.getElementById('#li_273').data("pricevalue").val();应为jQuery('#li_273').data("pricevalue").val();

同样变量price_value不存在,我想你的意思是price

例如:

$('#main_body').delegate('#element_240','keyup mouseout change', function(e){

    var temp = $(this).attr("id").split('_');
    var element_id = temp[1];

    var price = $('#li_273').data("pricevalue").val();

    var ordered = $(this).val();

    var price_value = parseFloat(price);
    if(isNaN(price_value)){
        price_value = 0;
    }

    $("#li_273").data("pricevalue",price_value);
    calculate_total_payment();          
}); 

答案 5 :(得分:1)

document.getElementById('#li_273')是问题所在。该方法无法识别哈希值。如果您想使用该方法获取元素ID,请尝试document.getElementById('li_273'),它会起作用。

否则使用所有jQuery。

答案 6 :(得分:1)

由于您使用的是jQuery,为什么使用document.getElementById而不是$(...)?它应该是:

$('#li_273').data("pricevalue")

另请注意,data()方法仅在jQuery对象上定义,而不是在DOM元素上定义。而且您不需要在它之后调用val() - 这是为了获取表单元素的值。