Veri jQuery öznitelik Verileri kullanarak ayarlanamıyor() API
MVC görünüm aşağıdaki alan var:
@Html.TextBoxFor(model => model.Course.Title, new { data_helptext = "Old Text" })</span>
Ayrı bir js dosyasında bir dize değeri data-helptext
özniteliğini ayarlamak istiyorum. İşte benim kod:
alert($(targetField).data("helptext"));
$(targetField).data("helptext", "Testing 123");
alert()
çağrı gayet iyi çalışıyor, metin" bir uyarı iletişim içinde. "Eski Metin gösterir Ancak, 123" çalışmıyor. "Test etmek için data-helptext
özniteliği ayarlamak için çağrı "" Hala özniteliği geçerli bir değerdir. eski Metin
Veri çağrısı kullanıyorum() yanlış? Bu web izledim ve neyi yanlış yaptığımı göremiyorum.
DÜZENLEME:
İşte HTML biçimlendirme:
<input data-helptext="Old Text" id="Course_Title" name="Course.Title" type="text" value="" />
CEVAP
.data()
documentation söz edilir
Veri nitelikler veri özelliği erişilen ilk kez çekilir ve sonra artık erişilebilir ya da mutasyona uğramış (tüm veri değerleri sonra içten bir WordPress kullanmak saklanır)
Bu da Why don't changes to jQuery $.fn.data() update the corresponding html 5 data-* attributes? kaplıydı
Benim orijinal cevap demoyu aşağıda artık çalışmak için görünmüyor.
Cevap güncelledi
Yine, .data()
documentation
Gömülü tire ile öznitelikleri tedavisi jQuery 1.6 W3C HTML5 şartnameye uygun olarak değiştirilmiştir.
Yani <div data-role="page"></div>
aşağıdaki 16 ** doğrudur
$('div').data('data-role')
geçmişte çalıştığı oldukça eminim ama böyle daha fazla görünmüyor. Ve multi-tire ek bir örnek data- attributes dönüşüm camelCase için Konsol ekledi açmak yerine günlükleri HTML olan daha iyi bir vitrin oluşturduk.
Ayrıca jQuery Data vs Attr? bkz
HTML
<div id="changeMe" data-key="luke" data-another-key="vader"></div>
<a href="#" id="changeData"></a>
<table id="log">
<tr><th>Setter</th><th>Getter</th><th>Result of calling getter</th><th>Notes</th></tr>
</table>
JavaScript(jQuery 1.6.2 )
var $changeMe = $('#changeMe');
var $log = $('#log');
var logger;
(logger = function(setter, getter, note) {
note = note || '';
eval('$changeMe' setter);
var result = eval('$changeMe' getter);
$log.append('<tr><td><code>' setter '</code></td><td><code>' getter '</code></td><td>' result '</td><td>' note '</td></tr>');
})('', ".data('key')", "Initial value");
$('#changeData').click(function() {
// set data-key to new value
logger(".data('key', 'leia')", ".data('key')", "expect leia on jQuery node object but DOM stays as luke");
// try and set data-key via .attr and get via some methods
logger(".attr('data-key', 'yoda')", ".data('key')", "expect leia (still) on jQuery object but DOM now yoda");
logger("", ".attr('key')", "expect undefined (no attr <code>key</code>)");
logger("", ".attr('data-key')", "expect yoda in DOM and on jQuery object");
// bonus points
logger('', ".data('data-key')", "expect undefined (cannot get via this method)");
logger(".data('anotherKey')", ".data('anotherKey')", "jQuery 1.6 get multi hyphen <code>data-another-key</code>");
logger(".data('another-key')", ".data('another-key')", "jQuery < 1.6 get multi hyphen <code>data-another-key</code> (also supported in jQuery 1.6 )");
return false;
});
$('#changeData').click();
Orijinal cevap
HTML: bu
<div id="foo" data-helptext="bar"></div>
<a href="#" id="changeData">change data value</a>
ve bu JavaScript (jQuery 1.6.2)
console.log($('#foo').data('helptext'));
$('#changeData').click(function() {
$('#foo').data('helptext', 'Testing 123');
// $('#foo').attr('data-helptext', 'Testing 123');
console.log($('#foo').data('data-helptext'));
return false;
});
Chrome DevTools kullanarakKonsolDOM incelemek için, $('#foo').data('helptext', 'Testing 123');
değildeğer olarak güncelleyinKonsolama $('#foo').attr('data-helptext', 'Testing 123');
.
özel veri seçiciler jQuery HTML5 kulla...
Nasıl'in başlık öğesi değiştirmek...
Devre dışı öznitelik JQuery kullanarak...
Veri-* listeyi kullanarak / jQuery jav...
Devre dışı öznitelik geçiş giriş jQuer...