jQuery .prop() returns undefined, while .attr() works as expected for data-*
我只是想从两个元素中获取几个属性。从 input 元素获取属性 value 可以按预期工作。问题在于从 button 元素获取属性 data-detail 属性。使用 .prop() 时返回 undefined,但使用 .attr().
时按预期工作
谁能解释我目睹的这种奇怪行为?
HTML
1
2 3 4 5 6 7 |
<label for=“firstName”>First name</label>
<button id=“editFirstName” class=“btn ctaBtn greenBtn editBtn”>Edit</button> <button class=“btn ctaBtn greenBtn saveBtn” data–detail=“firstName”>Save</button> <button id=“closeFirstName” class=“btn ctaBtn greyBtn closeBtn”>Close</button> <input type=“text” id=“firstName” name=“firstName” value=“[+firstName+]” readonly> |
JS
1
2 3 4 5 6 7 8 9 |
$(“.saveBtn”).on(“click”, function() {
var saveBtn = $(this); // The following statement yields undefined. When using .attr() it works as expected. var detail = saveBtn.prop(“data-detail”); var relevantInput = saveBtn.parent().next(); // The following statement works as expected. var value = relevantInput.prop(“value”); // … }); |
- 你用的是什么版本的jquery?
- @LearningPhase jquery-1.11.3.min.js
- 对于数据属性,我建议使用 saveBtn.data(“detail”)
- @misher 我对此一无所知,谢谢 – 它确实按预期工作。
- @LearningPhase 不是我的数据详细信息被视为属性吗?如果不是,为什么不呢?
那是因为 HTML 元素上没有 data-detail 属性。
以下是 .data()、.prop() 和 .attr() 的简要说明:
DOM 元素是一个具有 methods、properties(来自 DOM)和 attributes(来自渲染的 HTML)的对象。其中一些 properties 通过 attributes id->id, class->className, title->title, style->style etc. 获得他们的 initial value
考虑这个元素:<input type=”checkbox” checked data-detail=”somedata” >
以下结果将是:
1
2 |
$(‘input’).prop(‘id’); // =>””-empty string, property id exist on the element (defined by DOM) , but is not set.
$(‘input’).attr(‘id’);// => undefined – doesn’t exist. |
如果您执行以下操作:
1
2 3 |
$(‘input’).attr(‘id’,“someID”);
$(‘input’).prop(‘id’); // => “someID” $(‘input’).attr(‘id’); // => “someID” |
还有:
1
2 3 |
$(‘input’).prop(‘id’,“someOtherID”);
$(‘input’).prop(‘id’);// => “someOtherID” $(‘input’).attr(‘id’);// => “someOtherID” |
So, some attributes and properties have 1:1 mapping. (change of
the attr result change of the prop and vice versa).
考虑以下内容:<input type=”text” data-detail=”somedata” value=”someValue”>
1
2 3 |
$(‘input’).prop(‘value’); // => “someValue”
$(‘input’).val(); // => “someValue” $(‘input’).attr(‘value’); // => “someValue” |
如果你这样做:
1
2 3 4 5 6 7 8 9 |
$(‘input’).prop(‘value’,‘newVal’);
// or $(‘input’).val(‘newVal’); $(‘input’).prop(‘value’); // =>”newVal” -value of the property |
.data() 的情况
1) 获取方式:
– 请记住 attribute name 是 data-* 而 property name 是 dataset,所以:
1
|
<input type=“checkbox” data–detail=“somedata”>
|
1
2 3 4 5 6 |
$(‘input’)[0].dataset; //=> [object DOMStringMap] { detail:”somedata”}
$(‘input’)[0].dataset.detail; // =>”somedata” $(‘input’).prop(‘dataset’); //=>[object DOMStringMap] { detail:”somedata”} $(‘input’).prop(‘dataset’).detail; // =>”somedata” $(‘input’).data(‘detail’); // =>”somedata” $(‘input’).attr(‘data-detail’); // =>”somedata” |
2) 设置方法:
I) $(‘input’).prop(‘dataset’).detail=’newData’;
1
2 3 4 |
$(‘input’).prop(‘dataset’); //=> [object DOMStringMap] { detail:”newData”}
$(‘input’).prop(‘dataset’).detail; // =>”newData” $(‘input’).attr(‘data-detail’); // =>”newData” $(‘input’).data(‘detail’); // =>”newData” |
II) $(‘input’).attr(‘data-detail’,’newData’);
1
2 3 4 |
$(‘input’).prop(‘dataset’); //=> [object DOMStringMap] { detail:”newData”}
$(‘input’).prop(‘dataset’).detail; // =>”newData” $(‘input’).attr(‘data-detail’); // =>”newData” $(‘input’).data(‘detail’); // =>”newData” |
So you can see that here is 1:1 mapping, attr change reflects prop and
vice versa.
但是检查第三种方式:
III) $(‘input’).data(‘detail’,’newData’);
1
2 3 4 |
$(‘input’).prop(‘dataset’); // => [object DOMStringMap] { detail:”somedata”}
$(‘input’).prop(‘dataset’).detail; // =>”somedata” $(‘input’).attr(‘data-detail’); // =>”somedata” $(‘input’).data(‘detail’); // =>”newData” <—–****** |
那么,这里发生了什么?
$(elem).data(key, value) does not change the HTML5 data-* attributes
of the element. It stores its values in $.cache internally.
所以为了获得 data-* 你永远不会出错 .data() :
1
2 3 4 5 6 7 |
$(“.saveBtn”).on(“click”, function() {
var saveBtn = $(this); var detail = saveBtn.data(“detail”); var relevantInput = saveBtn.parent().next(); var value = relevantInput.prop(“value”); }); |
- 哇!谢谢你很详细的回答,我学到了很多。
- 谢谢,比API的文档更有帮助
来源:https://www.codenong.com/36663690/