jQuery设置attr，然后获取attr

Question

I am creating a page that sets 2 attributes and then I am trying to reference those attributes after the page has loaded.

I have been able to set the attributes without a problem, I have also been able to reference the attributes if I hard code them into the credit and debit attributes.

But trying to call them dynamically isn't working. Open to suggestions.

<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

Suggest using data- attributes that can be read by jQuery.data()

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

GET

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

SET

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

The attributes don't have to exist to use this. You can store anything any time on an element, as well as read data in markup.

jQuery.data() API Docs

Answer 2

The problem is the "... some fancy code involving arrays and junk ..."

data.response suggests you are making an Ajax call which is asynchronous and you are trying to read the attributes before they are set.

Put the logic in the callback of the Ajax call, do not call in the onload portion.

Answer 3

To read dynamic attribute values, you need to use prop() instead of attr() .

Ideally, however you should store custom values in a data- attribute (ie data-credit ) and then use jQuery's data() method to get/set the value.

Answer 4

When grabbing the attributes for total_credit and total_debit you should use parseFloat();

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

you should also set a fallback in the case the attribute isn't set.

ex: total_credit = parseFloat($(".net").attr('credit')) || 0; 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 );
}