jQuery设置属性然后获取属性

Question

我正在创建一个页面，设置了两个属性，然后尝试在页面加载后引用这些属性。我已经成功地设置了这些属性，也可以在credit和debit属性中硬编码引用它们。但是动态调用它们并不起作用。欢迎提供建议。

<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 );
}

- Ben

---

这个看起来不错 http://jsfiddle.net/arunpjohny/8m3Gh/1/，但我建议使用`.data()`。 - Arun P Johny

任何在您的浏览器控制台中出现的错误 - Arun P Johny

当获取借记和信用属性时，应使用parseFloat();。 - Shawn G.

谢谢大家，.data() 是一个更好的方法。干杯！ - Ben

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文档

- charlietfl

Answer 2

问题在于“...涉及到数组和垃圾的一些花哨代码...”

data.response表明您正在进行异步的Ajax调用，并且您正在尝试在属性设置之前读取它们。

将逻辑放在Ajax调用的回调函数中，不要在加载部分调用。

- epascarello

---

这也有所帮助，谢谢伙计。这意味着我会调用afterPageLoad()几次，但我认为document ready和document load实际上是在页面加载之前和之后发生的！ - Ben

是的，但这并不意味着它会等待Ajax请求加载，它只是文档。 - epascarello

再次感谢。你是我曾经交谈过的最好的维京人。 - Ben

Answer 3

当获取 total_credit 和 total_debit 属性时，应使用 parseFloat();

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

在属性未设置的情况下，您还应设置备用方案。

例如：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 );
}

- Shawn G.

Answer 4

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

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

- Steve