Question

我发现要在JqueryMobile中启用和禁用按钮，我必须执行以下操作：

 $("#enable-livetv").addClass("livetvclick ui-btn ui-btn-inline ui-btn-corner-all ui-shadow ui-btn-up-b");
 $("#disable-livetv").addClass("livetvclick ui-btn ui-btn-inline ui-btn-corner-all ui-shadow ui-btn-up-c");

在Css中有没有办法对我可以重用它们的类进行分组，而不是必须在整个地方粘贴代码？

所以我在寻找：

$("#enable-livetv").addClass("enablebuttonstyle");
$("#disable-livetv").addClass("disablebuttonstyle");

Answer 1

这不起作用吗？

var classes_enable = "livetvclick ui-btn ui-btn-inline ui-btn-corner-all ui-shadow ui-btn-up-b";
var classes_disable = "livetvclick ui-btn ui-btn-inline ui-btn-corner-all ui-shadow ui-btn-up-c";
$("#enable-livetv").addClass(classes_enable);
$("#disable-livetv").addClass(classes_disable);

[编辑]

根据OP的问题，这里是如何在许多文件中重用已定义的变量。

首先，在defines.js文件夹中创建一个文件，比如说/js（可以是任何东西，真的，这只是一个例子）。

var classes_enable = "livetvclick ui-btn ui-btn-inline ui-btn-corner-all ui-shadow ui-btn-up-b";
var classes_disable = "livetvclick ui-btn ui-btn-inline ui-btn-corner-all ui-shadow ui-btn-up-c";

然后，每次需要定义时，就足以将JS文件包含在<head>标记中，如下所示：

<script type="text/javascript" src="js/defines.js"></script>

变量现在应该可以重复使用。

Answer 2

尝试

var myClass = "livetvclick ui-btn ui-btn-inline ui-btn-corner-all ui-shadow ui-btn-up-b";

$("#enable-livetv").addClass(myClass);

或许？

Answer 3

将类放在变量中？

enablebuttonstyle = "livetvclick ui-btn ui-btn-inline ui-btn-corner-all ui-shadow ui-btn-up-b";
disablebuttonstyle = "livetvclick ui-btn ui-btn-inline ui-btn-corner-all ui-shadow ui-btn-up-c";

$("#enable-livetv").addClass( enablebuttonstyle );

Answer 4

我不确定问题究竟是什么，这会减少你的代码。

var css = " livetvclick ui-btn ui-btn-inline ui-btn-corner-all ui-shadow ";
$("#enable-livetv").addClass(css + "ui-btn-up-b");
$("#disable-livetv").addClass(css + "ui-btn-up-c");

Answer 5

在JS中使用变量（但很可能是你将对全局命名空间进行规范），CSS或类似LESS的解决方案（但它需要某种编译）。说CSS我的意思是将你的类添加到ui类的定义中：

.ui-btn, .enablebuttonstyle {/* def*/}
.ui-btn-inline, .enablebuttonstyle {/* def*/}
.ui-btn-corner-all, .enablebuttonstyle {/* def*/}

理论上应该有效。

我可以在CSS中分组类吗？

5 个答案: