data-title2番目の値を空の文字列にしようとしていますoption（ここでvalue="24"）。けれどもconsole.log文は言うdata-title私は私のブラウザ上で要素を検査する場合、今空で、テキストがまだあります。ブラウザでHTMLを動的に変更する方法はありますか？
HTML：
<select name="ctl00$phBody$ddlTimeScale" id="ctl00_phBody_ddlTimeScale" class="timeline_options" data-list-items-tooltip-enabled="true">
<option value="1">1 Hour</option>
<option value="24" data-title="text 24">1 Day</option>
<option selected="selected" value="144" data-title="text 144">1 Week</option>
</select>
jQuery / JavaScript：
var selectID = "ctl00_phBody_ddlTimeScale";
console.log("Before 24: " + $('#' + selectID + ' option[value="24"]').data('title'));
$('#' + selectID + ' option[value="24"]').data('title', '');
console.log("After 24: " + $('#' + selectID + ' option[value="24"]').data('title'));
JSFIDDLEデモ-> http://jsfiddle.net/sp03musf/1/
.data（）は、属性data-attrとは異なる一致した要素にデータを格納し、.removeDataはストレージからデータ属性を削除します。
したがって、基本的に属性を削除する場合.data('title')、それはクライアント側のストレージから取得されるため、そのまま残ります。.removeData()それも削除するために使用します。
var selectId = $('#' + selectID + ' option[value="24"]');
selectId.attr('data-title', ''); // empty it in the DOM
selectId.removeData('title'); // clear storage
注意：
localStorageを使用する予定がない場合は、まったく書き込みdata('title')を行わないでください。.attr(data-title)毎回使用するだけなので、する必要はありませんremoveData()。
console.log("Before 24: " + $('#' + selectID + ' option[value="24"]').attr('data-title'));
$('#' + selectID + ' option[value="24"]').attr('data-title', '1');
console.log("After 24: " + $('#' + selectID + ' option[value="24"]').attr('data-title'));
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加