javascript - 如何将 jQuery 样式应用于按钮？

Question

我正在使用 jQuery Button并具有以下内容:

HTML:

<input class="test" type="checkbox" id="check"><label for="check">Toggle</label>
<input class="test2" type="checkbox" id="check2"><label for="check2">Hello</label>

脚本:

$(function() {
  $( "#check" ).button();
});
$(function() {
  $( "#check2" ).button();
});

CSS:

.ui-button .test {
    font:  12px Verdana, Helvetica, sans-serif;
    border-radius: 10px;
    border: 0;
    padding-top: 55px;
    background-image: url(graphics/move.png);
    background-repeat:no-repeat;
    background-position:center center;
    background-size: 48px 48px;
    box-shadow: 0 4px 4px 0 #888;
    background-position:center 10px;

}

我对一个按钮使用了 .ui-button .test 但 CSS 不起作用。

Answer 1

在这个 fiddle 中，按钮元素不是围绕当前元素创建的。当前元素被隐藏并创建一个新元素:

http://jsfiddle.net/ahallicks/KGq56/1/

要为按钮设置不同的样式，您需要更改 CSS，或者在创建按钮后将自定义类应用于按钮，例如 http://jsfiddle.net/ahallicks/KGq56/8/ :

$(function() {
    $( "#check" ).button().next().addClass("test");
});

但是，使用应用于标签的类而不是输入 http://jsfiddle.net/ahallicks/KGq56/9/ 更容易将 HTML 更改为以下内容:

<input type="checkbox" id="check"><label for="check" class="test">Toggle</label>

那么您只需要做以下事情:

$(function() {
    $( "#check" ).button();
});

然后您可以使用类选择器 .ui-button.test 适本地设置样式。