jquery，属性选择器，获取当前属性值

Question

I have an input:

<input type="text" size="5" maxlength="5" decimals="2">

where "decimals" could be a value from 0 to 4.

In the onblur event, whatever number the user types in will be changed to conform, thus:

decimals="2"
User enters: 123.456
Input is changed to: 123.46

That's trivial, no problem. My question is about the most efficient way to get the value of "decimals." Ordinarily, I'd write (jquery):

$('[decimals]').blur(function(){
    val = $(this).attr('decimals');
    // *** do stuff with val ***
});

...but it seems to me there ought to be a more efficient way to get the value of "decimals" since we've already selected the input based on that attribute. Is there, or is my code as written the only way?

Answer 1

You may take a look to attributes . This is a NamedNodeMap with some functions.

If you are referring to attributes and not to custom data attributes you can do:

 $(function () { $('[decimals]').blur(function(){ var val = this.attributes.decimals.value; var val1 = this.attributes.getNamedItem('decimals').value; var val2 = this.getAttribute('decimals'); console.log('this.attributes.decimals.value = ' + val); console.log('this.attributes.getNamedItem("decimals").value = ' + val1); console.log('this.getAttribute("decimals") = ' + val); // *** do stuff with val *** }).trigger('blur'); }); 

 <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script> <form> <input type="text" size="5" maxlength="5" decimals="2"> </form> 

Instead if you are referring to custom data attributes:

decimals="2"

User enters: 123.456

Input is changed to: 123.46

You can do:

 $(function () { $('[data-decimals]').on('blur', function(e){ var val = +$(this).data('decimals'); var txtNumber = +this.value; this.value = txtNumber.toFixed(2); }); }); 

 <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script> <form> <input type="number" size="5" maxlength="5" data-decimals="2"> </form>