在通过jQuery修改值后，数据属性不应用css [英] Data Attribute does not apply css after modify the value by jQuery

问题描述

我想按列表项（li）实现检查清单。我使用data-checked属性来保持检查状态。我用css选择器设置图标颜色（'true'=黑色和'假'=白色）。

I would like to implement a check list by list item (li). I use data-checked attribute to keep the checking state. I set the icon color with css selector ('true' = black and 'false' = white color).

页面显示时工作正常，所有任务显示白色图标作为其默认数据检查值为false。但是当我单击列表项时，数据检查的值被修改为'false'，但颜色不会变为黑色。

It work fine when the page display, all tasks show the white icon as their default data-checked value is 'false'. But when I click the list items, the data-checked value is modified to 'false', but the color does not change to black.

我已经检查了值提醒他们。它们是正确的。

I have checked the value by alert them. They are properly.

我做错了什么？

谢谢。

HTML：

<ul>
  <li data-id='1' data-checked='false' onclick='toggle_task(this);'>
    <i class='fs fa-check'></i>
    <span>Task A</span>
  </li>
  <li data-id='2' data-checked='false' onclick='toggle_task(this);'>
    <i class='fs fa-check'></i>
    <span>Task B</span>
  </li>
</ul>
<button onclick='show_checked();'>Done</button>

CSS：

ul li[data-checked='true'] i:first-child {
  color: #000000;
}
ul li[data-checked='false'] i:first-child {
  color: #eeeeee;
}

Javascript：

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数据 - *属性之间（您正在使用它们作为您的一部分） CSS选择器）和 jQuery数据方法，它存储与元素相关但在DOM之外的任意JavaScript对象。混淆可能来自于此 -

I think you have become confused between the HTML data-* attributes (which you are using as part of your CSS selector) and the jQuery data method which stores arbitrary JavaScript objects associated with the element but outside of the DOM. The confusion probably comes from this-

.data（key）返回：对象描述：

.data( key ) Returns: Object Description:

返回jQuery集合中第一个元素的
命名数据存储的值，如数据（名称，值）或HTML5 data- *属性设置的
。

Return the value at the named data store for the first element in the jQuery collection, as set by data(name, value) or by an HTML5 data-* attribute.

如果该键没有值，则该方法允许您从HTML 5 data- *属性中读取数据jQuery集合，但不是设置它。

The method allows you to read data from HTML 5 data-* attributes if there is no value with that key in the jQuery collection, but not to set it.

你想要做的是使用 jQuery attr方法就像这样 -

What you want to do is use the jQuery attr method like this-

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调用。

As a bonus the attr method returns a string and not an object - so you can dispense with the toString calls.

我不完全确定你想要什么视觉上，但如果你想要一个彩色块需要元素指示是否检查（在这种情况下< i>元素不是最合适的语言）你还需要更新你的CSS -

I'm not entirely sure what you want to do visually, but if you want to have a coloured block need to the element indicating if it is checked or not (in which case the <i> element is not the most semantically appropriate) you also need to update your 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;
}

我创建了您的原始代码和更新后的代码 em>想想你想要它。

I have created JSFiddles of your original code and the updated code which is worked as I think you want it to.

请考虑使用查询方法而不是内联onclick属性。这会使您的JavaScript逻辑与HTML内容分开，请参阅 http://en.wikipedia.org/wiki/Unobtrusive_JavaScript 。

Please, please, please consider using unobtrusive event handlers with jQuery using the jQuery on method rather than having inline "onclick" attributes. This keeps your JavaScript logic separate from your HTML content, see http://en.wikipedia.org/wiki/Unobtrusive_JavaScript.

这篇关于在通过jQuery修改值后，数据属性不应用css的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！