jQuery .prop（）返回未定义，而.attr（）按照预期的那样对数据* [英] jQuery .prop() returns undefined, while .attr() works as expected for data-*

问题描述

我只是试图从两个元素中获得几个属性。从输入元素中获取属性 value 会按预期工作。问题是从按钮元素获取属性 data-detail 属性。它在使用 .prop（）时返回 undefined ，但在使用 .attr时按预期工作（）。

任何人都可以解释我目睹的这种奇怪行为吗？

HTML

 < div class =formRow> 
< label for =firstName>名字< / label> 
< div class =detailsControlBtns> 
< button id =editFirstNameclass =btn ctaBtn greenBtn editBtn>编辑< / button> 
< button class =btn ctaBtn greenBtn saveBtndata-detail =firstName>保存< /按钮> 
< button id =closeFirstNameclass =btn ctaBtn greyBtn closeBtn>关闭< / button> 
< / div> 
< input type =textid =firstNamename =firstNamevalue =[+ firstName +]readonly> 
< / div> 
  

JS
< $（$）$（$）$（$）$（$）$（$）$（$）$如果使用.attr（），它会按预期工作。
var detail = saveBtn.prop（data-detail）;
var relevantInput = saveBtn.parent（）。next（）;
//下面的语句按预期工作：
var value = relatedInput.prop（value）;
// ...
}）;

解决方案

这是因为没有 data-detail 。

以下是对 .data（）， .prop（） 和 .attr（）：


DOM 元素是对象，它具有方法和属性（来自 DOM ）和属性（来自呈现的 HTML ）。其中一些属性通过属性获取它们的初始值
id-> id，class-> className，title-> title，style-> style etc。 b 请考虑以下元素： < input type =checkboxchecked data-detail =somedata> b $ b 结果如下：

  $（'input'）。prop （'ID'）; // =>  - 元素上存在的空字符串，属性ID（由DOM定义），但未设置。 
 $（'input'）。attr（'id'）; // =>未定义 - 不存在。 
  

---

如果您执行以下操作：

  $（'input'）。attr（'id'，someID）; 
 $（'input'）。prop（'id'）; // => someID
 $（'input'）。attr（'id'）; // => someID
  

还有：

  $（'input'）。prop（'id'，someOtherID）; 
 $（'input'）。prop（'id'）; // => someOtherID
 $（'input'）。attr（'id'）; // => someOtherID
  

所以，一些属性和属性有 1 ：1个映射。 （改变
的属性结果改变道具，反之亦然）。

---

<请考虑以下内容： < input type =textdata-detail =somedatavalue =someValue>

  $（'input'）。prop（'value'）; // => someValue
 $（'input'）。val（）; // => someValue
 $（'input'）。attr（'value'）; // => someValue
  

如果您这样做：

  $（'input'）。prop（'value'，'newVal'）; 
 
 //或
 
 $（'input'）。val（'newVal'）; 
 
 $（'input'）。prop（'value'）; // => newVal - 属性的值
 $（'input'）。val（）; // => newVal - 属性的值
 $（'input'）。attr（'value'）; // => attr的someValue值没有变化，因为在这种情况下它不是1：1映射（prop值的变化不反映到属性值）。 
  

---

与 .data（）

1）如何获得：

- 请记住属性名称是数据 - * 和属性名称是数据集，所以：



 < input type =checkboxdata-detail =somedata> ; 
  

 

  $（'input'）[0] .dataset; // => [object DOMStringMap] {detail：somedata} 
 $（'input'）[0] .dataset.detail; // => somedata
 $（'input'）。prop（'dataset'）; （'input'）。prop（'dataset'）。detail; / / = [object DOMStringMap] {detail：somedata} 
 $ // => somedata
 $（'input'）。data（'detail'）; // => somedata
 $（'input'）。attr（'data-detail'）; // => somedata
  

2）如何设置：

$ （'data'）。detail ='newData'; $ b

I） （'input'）。prop（'dataset'）; $（$'$'$'$'$'$'$'$'$'$'$' // => [object DOMStringMap] {detail：newData}
$（'input'）。prop（'dataset'）。detail; // => newData
$（'input'）。attr（'data-detail'）; // => newData
$（'input'）。data（'detail'）; // => newData


II $（'输入'）。attr（'data-detail'，'newData'）;

  $（ 输入）丙（数据集）。 // => [object DOMStringMap] {detail：newData} 
 $（'input'）。prop（'dataset'）。detail; // => newData
 $（'input'）。attr（'data-detail'）; // => newData
 $（'input'）。data（'detail'）; // => newData
  

所以你可以看到这里是1：1映射，attr变化反映的是道具和
，反之亦然。

但请检查第三种方式： < （'input'）。data（'detail'，'newData'）;

c $ c

$ $ $ $'$'$''''。prop（'dataset'）; // => [object DOMStringMap] {detail：somedata}
$（'input'）。prop（'dataset'）。detail; // => somedata
$（'input'）。attr（'data-detail'）; // => somedata
$（'input'）。data（'detail'）; // => newData< ----- ******


所以，发生了什么事上面这儿？

$（elem）.data（key，value）不会更改元素的HTML5数据 - * 属性
。它在内部将它的值存储在 $。cache 中。

code> data - * 您绝不会遇到 .data（）：

$ b $ （click，function（）{
var saveBtn = $（this）;
var detail = $（。saveBtn saveBtn.data（detail）;
var relevantInput = saveBtn.parent（）。next（）;
var value = relatedInput.prop（value）;

}）;


I am simply trying to get a couple of properties from two elements. Getting the property value from the input element works as expected. The problem is with getting the property data-detail property from the button element. It returns undefined when using .prop(), but works as expected when using .attr().

Can anyone explain this odd behaviour I am witnessing?

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

解决方案

That's because there's no data-detail property on HTML element.

Here is a quick explanation for .data(), .prop() and .attr() :

DOM element is an object which has methods, and properties (from the DOM) and attributes(from the rendered HTML). Some of those properties get their initial value by the attributes
id->id, class->className, title->title, style->style etc.

Consider this element: <input type="checkbox" checked data-detail="somedata" >

The result of the following would be:

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

---

If you do the following:

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

And also:

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

---

Consider the following: <input type="text" data-detail="somedata" value="someValue">

$('input').prop('value'); // =>  "someValue"
$('input').val();         // =>  "someValue"
$('input').attr('value'); // =>  "someValue"

And if you do:

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

---

Case with the .data()

1) How to get:

- Have in mind that attribute name is data-* and property name is dataset, so:

<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) How to set:

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

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

But check the third way:

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"    <-----******

So, what is happening up here?

$(elem).data(key, value) does not change the HTML5 data-* attributes of the element. It stores its values in $.cache internally.

So for getting data-* you would never go wrong with .data() :

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

});

这篇关于jQuery .prop（）返回未定义，而.attr（）按照预期的那样对数据*的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！