javascript - 更新嵌套复选框的 CSS onDomReady

Question

我有一些嵌套的复选框正在从数据库加载正确的数据，但是我想在已检查的文本标签中插入一行。它对于第二级复选框工作正常，但我无法使第一级复选框工作正常。

您可以在此处查看该错误:

http://jsfiddle.net/Zfv7h/3/

$(document).ready(function() {
  $(".content-finalized").each(function() {
    if ($(this).attr("checked")) {
     $(this).closest("li").css("text-decoration", "line-through");
    }
    });
  $(".subchapter-finalized").each(function() {
    if ($(this).attr("checked")) {
      $(this).closest("li").css("text-decoration", "line-through");
    }
    });
});

感谢您的帮助。

Answer 1

更新答案

将你的 Javascript 更改为此

$(document).ready(function () {
    $("input.content-finalized:checkbox:checked").next('span').css("text-decoration", "line-through");
    $("input.subchapter-finalized:checkbox:checked").parent().css("text-decoration", "line-through");
});

我不得不稍微改变一下你的 html 标记。我所做的只是将这一章包裹在一个 .原因如下。当我将 css line-though 应用到父级 <li> 时，它也将其应用于它的子元素，即使我将未检查元素的文本装饰指定为 none 。因此，现在不要将其应用于父级 <li> ，我将其应用于 <span>相反。

Here's an updated fiddle