jquery - 使用 JQuery 更改 :before CSS 选择器的背景位置

Question

我将它用于自定义单选按钮和复选框，但我需要:before在单击时更改元素的背景。是否可以？

HTML

<div class="checkbox">
<input type="checkbox" value="1" name="test">
</div>

CSS（它的.less）

.checkbox {
    display: inline-block;
    margin: 0 4px 0 0;
    cursor: pointer;
    text-align: left;
    padding: 0px;

    input { display: none; }

    &:before {
        background: url(/img/checkboxes.png) no-repeat;
        content: "";
        float: left;
        height: 18px;
        width: 19px;
        margin: 0;
    }
}

Answer 1

你不能用 jQuery 选择伪元素，我想说最干净的解决方案是用 jQuery 操作元素的类：

.checkbox {
    display: inline-block;
    margin: 0 4px 0 0;
    cursor: pointer;
    text-align: left;
    padding: 0px;

    input { display: none; }

    &:before {
        background: url(/img/checkboxes.png) no-repeat;
        content: "";
        float: left;
        height: 18px;
        width: 19px;
        margin: 0;
    }

    &.someclass:before {
      background-position:0 -55px;
    }
}

然后：

$('.checkbox').addClass('someclass');