关于 javascript：jQuery .prop() 返回未定义，而 .attr() 对数据按预期工作-*
jQuery .prop() returns undefined, while .attr() works as expected for cellpadding="0">
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>
2
3
4
5
6
7
<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 元素上没有 checked >
以下结果将是：
|
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" 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 是 cellpadding="0">
|
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 cellpadding="0">
2
3
4
5
6
7
var saveBtn = $(this);
var detail = saveBtn.data("detail");
var relevantInput = saveBtn.parent().next();
var value = relevantInput.prop("value");});
相关讨论
- 哇！谢谢你很详细的回答，我学到了很多。
- 谢谢，比API的文档更有帮助