在通过jQuery修改值之后，数据属性不应用css
我想按列表项（li）实现一个检查清单。 我使用data-checked属性来保持检查状态。 我用css选择器设置图标颜色（’true’=黑色和’false’=白色）。
页面显示时工作正常，所有任务都显示白色图标，因为其默认数据检查值为“false”。 但是，当我单击列表项时，数据检查的值将被修改为“false”，但颜色不会更改为黑色。
我通过提醒他们检查了价值。 他们是正确的。
我究竟做错了什么？
谢谢。
HTML：
- Task A
- Task B
CSS：
ul li[data-checked='true'] i:first-child { color: #000000; } ul li[data-checked='false'] i:first-child { color: #eeeeee; }
使用Javascript：
function toggle_task(sender) { if ($(sender).data('checked').toString == 'true') { $(sender).data('checked','false'); } else { $(sender).data('checked','true'); } } function show_checked() { $(li).each(function() { var text = $(this).data('id').toString() + ': ' + $(this).data('checked').toString(); alert($(this).data('checked')); }); }
我认为你已经混淆了HTML data- *属性 （你用作CSS选择器的一部分）和jQuery数据方法 ，它存储与元素相关但在DOM之外的任意JavaScript对象。 混淆可能来自于此 –
.data（key）返回：对象描述：
返回jQuery集合中第一个元素的命名数据存储的值，由data（name，value） 或HTML5 data- *属性设置。
如果jQuery集合中没有该键的值，则该方法允许您从HTML 5 data- *属性中读取数据，但不能设置它。
你想要做的是使用像这样的jQuery attr方法 –
function toggle_task(sender) { if ($(sender).attr('data-checked') === 'true') { $(sender).attr('data-checked','false'); } else { $(sender).attr('data-checked','true'); } } function show_checked() { $('li').each(function() { var text = $(this).attr('id') + ': ' + $(this).attr('data-checked'); alert($(this).attr('data-checked')); //Consider using console.log rather than alert here }); //Fixed your jQuery selector - required quotes for li element - is not a JavaScript variable }
作为奖励，attr方法返回一个字符串而不是一个对象 – 所以你可以省去toString调用。
我不完全确定你想要在视觉上做什么，但如果你想要一个彩色块需要元素指示它是否被检查（在这种情况下元素不是最合适的语义）你还需要更新你的CSS-
/* These need to be background-color, not color */ ul li[data-checked='true'] i:first-child { background-color: #000000; } ul li[data-checked='false'] i:first-child { background-color: #eeeeee; } /* Also need to add these styles to actually see the empty elements */ .fa-check { display: inline-block; height: 0.5em; width: 0.5em; }
我已经创建了原始代码的 JSFiddles以及我认为你想要的更新代码 。
请考虑使用jQuery on方法而不是使用内联“onclick”属性，请考虑使用不显眼的事件处理程序和jQuery。 这使您的JavaScript逻辑与HTML内容分开，请参阅http://en.wikipedia.org/wiki/Unobtrusive_JavaScript 。