Question

为什么CSS类没有应用于按下JQuery的按钮的任何注释？

CSS

input[type=button] {
    width: 100px;
    &.is-pressed {
        border: 5px solid blue; }
    &.is-not-pressed {
        border: none; }
}

JQuery的

$(":button").click(function () {
    $(this).addClass("input[type=button].is-pressed")
    .removeClass("input[type=button].is-not-pressed");

    $(':button').not(this).each(function(){
         $(this).addClass("input[type=button].is-not-pressed");
        });
});

JSFiddle

Answer 1

因为你的样式表不是CSS，看起来你有一个LESS脚本，你需要解析它以便应用CSS样式。

另外你的脚本不正确，当你添加一个类时，只需要指定类名而不是css规则中指定的所有选择器

$(":button").click(function () {
    $(this).addClass("is-pressed")
        .removeClass("is-not-pressed");

    $('.is-pressed:button').not(this).addClass("is-not-pressed").removeClass("is-pressed");
});

演示：Fiddle

Answer 2

检查一下。你没有使用预编译的CSS。如果你在jQuery中添加类，你不必在里面添加.。

Fiddle

<强>的jQuery

改变这个：

 $(this).addClass("input[type=button].is-pressed")
    .removeClass("input[type=button].is-not-pressed");

对此：

    $(this).addClass("is-pressed")
    .removeClass("is-not-pressed");

编译你的 CSS 到此。

input[type=button] {
    width: 100px;
}
input[type=button].is-pressed {
        border: 5px solid blue; 
}
input[type=button].is-not-pressed {
        border: none; 
}

为什么类样式没有应用于按钮

2 个答案:

Fiddle