我只是想从两个元素中获取几个属性。从 input 元素获取属性 value 按预期工作。问题在于从 button 元素获取属性 data-detail 属性。它在使用 .prop() 时返回 undefined，但在使用 .attr() 时按预期工作。

谁能解释我目睹的这种奇怪行为？

HTML

<div class="formRow">
    <label for="firstName">First name</label>
    <div class="detailsControlBtns">
        <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>
    </div>
    <input type="text" id="firstName" name="firstName" value="[+firstName+]" readonly>
</div>

JS

$(".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");
    // ...
});

最佳答案

那是因为 HTML 元素上没有data-detail property。

这是对 .data() 的快速解释, .prop()和 .attr() :

DOM 元素是一个对象，它具有 methods , 和 properties (来自 DOM )和 attributes (来自呈现的 HTML )。其中一些properties得到他们的 initial value通过 attributes
id->id, class->className, title->title, style->style etc.

考虑这个元素: <input type="checkbox" checked data-detail="somedata" >

以下的结果将是:

$('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.

$('input').attr('id',"someID");
$('input').prop('id'); // =>  "someID"
$('input').attr('id'); // =>  "someID"

还有:

$('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').prop('value'); // =>  "someValue"
$('input').val();         // =>  "someValue"
$('input').attr('value'); // =>  "someValue"

如果你这样做:

$('input').prop('value','newVal');

// or

$('input').val('newVal');

$('input').prop('value'); // => "newVal"    -value of the property
$('input').val();         // => "newVal"    -value of the property
$('input').attr('value'); // => "someValue" -value of the attr didn't change, since in this case it is not 1:1 mapping (change of the prop value doesn't reflect to the attribute value).

案例与 .data()

1)获取方式:

- 请记住 attribute name是data-*和 property name是dataset ，所以:

<input type="checkbox" data-detail="somedata" > 

 $('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) 如何设置:

我) $('input').prop('dataset').detail='newData';

 $('input').prop('dataset');  //=> [object DOMStringMap] { detail: "newData"}
 $('input').prop('dataset').detail; // => "newData"
 $('input').attr('data-detail'); // => "newData"
 $('input').data('detail'); // => "newData"

二) $('input').attr('data-detail','newData');

 $('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');

 $('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() 你永远不会出错:

$(".saveBtn").on("click", function() {
    var saveBtn = $(this);
    var detail = saveBtn.data("detail");
    var relevantInput = saveBtn.parent().next();
    var value = relevantInput.prop("value");

});

关于javascript - jQuery .prop() 返回未定义，而 .attr() 按预期方式工作 data-*，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36663690/