JQuery.prop () grąžina neapibrėžtą, tuo tarpu .attr () veikia kaip tikėtasi duomenų *

Aš tiesiog bandau gauti keletą savybių iš dviejų elementų. value nuosavybės iš input elemento naudojimas veikia taip, kaip tikėtasi. Problema yra data-detail savybės gavimas iš button elemento. Jis grąžina undefined kai naudojamas .prop() , bet veikia kaip tikėtasi naudojant .attr() .

Ar kas nors gali paaiškinti šį keistą elgesį, kurį stebiu?

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"); // ... }); 
5
16 апр. nustatė Liran H 16 d. 2016-04-16 14:41 '16 at 14:41 pm 2016-04-16 14:41
ответ 1 atsakymas

Taip yra todėl, kad HTML elemente nėra duomenų detalės .

Štai trumpas aprašymas . duomenys () , .prop () ir . attr () :

DOM yra objektas, turintis methods ir properties (iš DOM ) ir attributes (iš HTML atvaizdavimo). Kai kurios iš šių properties initial value gauna naudodamos attributes
id->id, class->className, title->title, style->style etc.

Apsvarstykite šį elementą: <input type="checkbox" checked data-detail="somedata" >

Rezultatas toliau:

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


Jei atliksite šiuos veiksmus:
 $('input').attr('id',"someID"); $('input').prop('id'); // => "someID" $('input').attr('id'); // => "someID" 

Taip pat:

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

Taigi kai kurie atributai ir savybės turi 1: 1 ekraną . (pakeisti rezultatą pritraukti ir tt).


Apsvarstykite: <input type="text" data-detail="somedata" value="someValue">
 $('input').prop('value'); // => "someValue" $('input').val(); // => "someValue" $('input').attr('value'); // => "someValue" 

Ir jei darote:

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

Byla su duomenys ()

1) Kaip gauti:

- Atminkite, kad attribute name yra data-* ir property name yra dataset , todėl:

 <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) Kaip įdiegti:

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" 

Taigi galite matyti, kad rodomas 1: 1 ekranas, patraukimas patenka į projektą ir atvirkščiai.

Bet patikrinkite trečiąjį būdą:

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

Taigi, kas čia vyksta?

$(elem).data(key, value) nekeičia HTML5 data-* elemento atributų. Ji saugo savo vertes $.cache viduje.

Taigi, norėdami gauti data-* , niekada negalėsite .data() :

 $(".saveBtn").on("click", function() { var saveBtn = $(this); var detail = saveBtn.data("detail"); var relevantInput = saveBtn.parent().next(); var value = relevantInput.prop("value"); }); 
12
16 апр. Atsakymą pateikė „ The Process “ balandžio 16 d 2016-04-16 14:48 '16 at 14:48 pm 2016-04-16 14:48

Kiti klausimai apie „ žymes „ arba „ Užduoti klausimą“