如何使用JQuery选择复选框和字体很棒的元素

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

您可以使用addClass()来简化代码吗？

例：

 function greyOut(classname) { $(classname).addClass("checked"); } 

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

 <div class="classname"> <input type="checkbox"> </div> 

Answer 2

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'});
}