javascript - 如何使用 JQuery 选择复选框和 Font Awesome 元素

Question

JQuery 使得通过 ID 或类名选择元素变得很容易，但这有点超出我的知识范围。

调用函数时，我希望应用以下样式。

.classname input[type="checkbox"] ~ i.fa.fa-circle-o {
     color: grey;
}


.classname input[type="checkbox"]:checked ~ i.fa.fa-check-circle-o {
     color: grey;
}

所以我尝试将它们放入这样的函数中:

function greyOut(classname) {
    console.log("fired");

    $("." + classname + " input[type='checkbox'] ~ i.fa.fa-circle-o").css("color: grey");
    $("." + classname + " input[type='checkbox']:checked ~ i.fa.fa-check-circle-o").css("color: grey");
}

但这根本不起作用。该函数已触发，但这些元素的颜色没有变化，控制台也没有错误。

Answer 1

IMO 这只是糟糕的 jQuery 语法。当您在 .css() 方法中更改属性时，您必须使用另一种语法。因此，您有以下两种可能性:

function greyOut(classname) {
  console.log("fired");
  $("." + classname + " input[type='checkbox'] ~ i.fa.fa-circle-o").css("color", "grey");
  $("." + classname + " input[type='checkbox']:checked ~ i.fa.fa-check-circle-o").css("color", "grey");
}

或者:

function greyOut(classname) {
  console.log("fired");
  $("." + classname + " input[type='checkbox'] ~ i.fa.fa-circle-o").css({color: 'grey'});
  $("." + classname + " input[type='checkbox']:checked ~ i.fa.fa-check-circle-o").css({color: 'grey'});
}