Question

我试图让data-title值为第二个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

Answer 1

除此之外，您可以使用.attr（）将数据标题设置为空值。

$('#' + selectID + ' option[value="24"]').attr('data-title', '');

Answer 2

JSFIDDLE DEMO - ＆gt; 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'));

删除数据项时，HTML不会更改

2 个答案: