jquery - 如何在 :after 范围内使用 JQuery CSS 从选择器动态更改颜色

Question

我在更改特定代码的颜色时遇到了这个问题。我的问题出在 jQuery 中，有人可以帮助我吗？

我想知道是否可以做些什么来改变颜色 选择器。像这样:当 span 是 :after/checkBox 被检查然后脚本运行。 .selector:after 将更改边框颜色，使用 $(".selector").css("border", "solid "+ "Red") 显示具有特定动态颜色的选择器;

$(document).ready(function() {

});

.checkBox {
  display: block;
  position: relative;
  margin-bottom: 12px;
  cursor: pointer;
  font-size: 22px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* hide default checkBox */
.checkBox input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}

/* create "checkbox" */
.selector {
  position: absolute;
  top: 0;
  left: 0;
  height: 25px;
  width: 25px;
  background: #fff;
  border-radius: 4px;
  border-width: 1px;
  box-shadow: inset 0px 0px 10px #ccc;
}

/* selector (hide it when checkBox not checked) */
.selector:after {
  content: "";
  position: absolute;
  display: none;
}

/* show selector (when checkBox checked) */
.checkBox input:checked~.selector:after {
  display: block;
}

/* selector style */
.checkBox .selector:after {
  left: 9px;
  top: 7px;
  width: 5px;
  height: 10px;
  border: solid #1F4788;
  border-width: 0 2px 2px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label class="checkBox">
  <input type="checkbox" value="x" name="x" id="x" />
  <span class="selector"></span>
</label>

修复/解决方案:我确实找到了解决方案，感谢大家的帮助: 在 CSS 文件中:

 .checkBox .selector:after {
  left: 9px;
  top: 7px;
  width: 5px;
  height: 10px;
  border: solid;
  border-width: 0 2px 2px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

并在 JQuery on View 脚本中添加:

$(document).ready(function() {
$(".selector").css("color", "@ViewBag.vbColor");
});

ViewBag.vbColor，它将是来自 Controller 的动态颜色，它访问具有特定颜色的数据库表。 感谢您分享的所有帮助。 :)

Answer 1

.checkBox {
  display: block;
  position: relative;
  margin-bottom: 12px;
  cursor: pointer;
  font-size: 22px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* hide default checkBox */
.checkBox input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}

/* create "checkbox" */
.selector {
  position: absolute;
  top: 0;
  left: 0;
  height: 25px;
  width: 25px;
  background: #fff;
  border-radius: 4px;
  border-width: 1px;
  box-shadow: inset 0px 0px 10px #ccc;
}

/* selector (hide it when checkBox not checked) */
.selector:after {
  content: "";
  position: absolute;
  display: none;
}

/* show selector (when checkBox checked) */
.checkBox input:checked~.selector:after {
  display: block;
}

/* selector style */
.checkBox .selector:after {
  left: 9px;
  top: 7px;
  width: 5px;
  height: 10px;
  border: solid #1F4788;
  border-width: 0 2px 2px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label class="checkBox">
  <input type="checkbox" value="x" name="x" id="x" />
  <span class="selector"></span>
</label>