Question

我正在创建一个设置2个属性的页面，然后我试图在页面加载后引用这些属性。

我能够毫无问题地设置属性，如果我将它们硬编码到信用卡和借记卡属性中，我也能够引用这些属性。

但是试图动态调用它们并不起作用。接受建议。

<div class="net" credit="" debit=""></div>


$(document).ready(function() {
    ... some fancy code involving arrays and junk ...
    if(TYPE == 'credit') {
        $(".net").attr('credit',data.response.stats.total);
    } else if (TYPE = 'debit') {
       $(".net").attr('debit',data.response.stats.total);
    }
});

$(window).bind("load", function() {
    afterPageLoad();
});

function afterPageLoad(){
    total_credit = $(".net").attr('credit');
    total_debit = $(".net").attr('debit');
    total = (total_credit - total_debit);
    $(".net").html( "$"+total );
}

Answer 1

建议使用jQuery.data（）

可以读取的data-属性

<div id="test" data-foo="bar"></div>

GET

alert( $('#test').data('foo'))

SET

$('#test').data('foo','new value, or object or array'))

不必存在使用此属性的属性。您可以随时在元素上存储任何内容，也可以在标记中读取数据。

jQuery.data() API Docs

Answer 2

问题是“......一些涉及数组和垃圾的奇特代码......”

data.response建议您正在进行异步的Ajax调用，并且在设置属性之前尝试读取这些属性。

将逻辑放在Ajax调用的回调中，不要在onload部分调用。

Answer 3

要阅读动态属性值，您需要使用prop()而不是attr()。

理想情况下，您应该将自定义值存储在data-属性（即data-credit）中，然后使用jQuery的data()方法来获取/设置值。

Answer 4

抓取total_credit和total_debit的属性时，您应该使用parseFloat();

ex：parseFloat( $(".net").attr('credit') );

如果未设置属性，您还应设置后备。

ex：total_credit = parseFloat($(".net").attr('credit')) || 0;

$(document).ready(function() {
    var TYPE = 'credit';
    if(TYPE == 'credit') {
        $(".net").attr('credit', 123);
    } else if (TYPE = 'debit') {
       $(".net").attr('debit', 53);
    }
});

$(window).bind("load", function() {
    afterPageLoad();
});

function afterPageLoad(){
    total_credit = parseFloat($(".net").attr('credit'))||0;
    total_debit = parseFloat($(".net").attr('debit'))||0;
    total = (total_credit - total_debit);
    $(".net").html( "$"+total );
}

jQuery设置attr，然后获取attr

4 个答案: