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

如何使用JQuery

2 个答案: