jquery - 如何定义 Jquery 按钮样式？

Question

我一直在开发一个 jquery 移动页面，它上面有几个具有独特样式的按钮，例如:

作为客户端“jquery 驱动向导”的一部分...

<button data-function="back" class="back">Back</button>
<button data-function="next" class="next">Next</button>
<button data-function="submit" class="submit">Submit</button>

...根据您在向导中的位置，这些按钮会显示/隐藏。

没问题...直到我了解样式。JQuery 自行“包裹我的按钮并隐藏它”，所以我最终得到的东西看起来像......

<div class="ui-btn ...">    
   <span class="ui-btn-inner ...">Back</span>
   <button class="back">Back</button> 
</div>

如上所述，它隐藏了我的按钮，并且我的后退按钮的自定义样式实际上丢失了。我不想只为我的自定义按钮设置所有按钮的样式。

我考虑过使用一些 JQuery 将我的自定义样式移动到父“div”元素，作为文档就绪脚本的一部分，但这似乎很愚蠢，必须为每个按钮执行此操作，并且逻辑可能会变得非常复杂或冗长如果每次我想要不同的按钮类型时都必须这样做。

是否有一个标准的方式来表达“JQuery，我希望这个类应用于您生成的按钮元素......”或者这是一个错误？

我注意到其他人完全避免使用这种方法，例如...... http://m.nationalrail.co.uk/pj/home

访问按钮上的官方 JQuery 移动页面似乎表现出相同的行为: http://jquerymobile.com/demos//1.2.0/docs/buttons/buttons-types.html

(访问前记得将您的浏览器代理更改为移动设备)

有什么想法吗？理想情况下，我希望避免使用我自己的一些 JQuery 将样式“破解”到正确的元素，以避免减慢页面速度并引入更多代码，然后我必须维护只是因为我想要一个蓝色和一个橙色按钮彼此相邻。

问题是这是我们公司的主登陆页面，因此样式被认为非常重要。

编辑@Gajotres:

添加另一个主题可能会解决问题，但我对此页面的职责是让它尽快执行，并且加载具有多个主题的页面将意味着更多的加载时间。

我认为这样的事情是一个可能的解决方案，但我认为 JQuery 应该已经这样做了，所以我的想法是也许我做错了什么......

<script type="text/javascript">
   var allButtons = $(button);
   allButtons.each(function() { 
      var css = $(this).className;
      $(this).prev().addClass(css);
   });
</script>

这将导致我将按钮上的任何类应用到 jquery 已生成且现在显示在其位置的 span 标记。然后，我需要附加一些进一步的功能，以确保我有选择地复制某些类(在我看来只是愚蠢的)。

在这里采用 JQuery 方法，我可以添加类似...的内容

data-customStyle="myClass" 

...对于我想要设置样式的每个按钮，然后使用类似...

<script type="text/javascript">
   var customButtons = $("data-customStyle");
   customButtons.each(function() { 
      $(this).prev().addClass($(this).data("customStyle"));
   });
</script>

...将样式附加到“代表按钮的 jquery 标签”。

我对此的想法...WTF？!？!

JQuery 的宗旨就是让生活变得更轻松，而不是更困难？我不应该“发布黑客添加”的东西来完成我基本上已经在服务器上所做的事情，并且 JQuery 崩溃了。

这是 JQuery 中的错误吗？

Answer 1

找到与 jQuery 关联的 css 文件，并尝试引用需要样式和不需要样式的 div 来编辑该文件。否则，对于那些您不需要样式的按钮，只需将类或 id 更改为 css 文件中不存在的其他名称即可。

有时即使你更改了类(在CSS中类名在点示例“.class”之后)或id(在CSS中ID名称在散列“#id”之后)，如果不是全部，有时也会发生一些小的变化，例如背景颜色可能保持不变。为此，请检查与主要属性相对应的 css 文件，例如 or 或 (在 css 属性名称中放置在方括号之间，例如“[title]”)。作为引用，您可以查看http://www.w3schools.com/css/