3

我一直在开发一个 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 生成的跨度标记，现在显示在它的位置。然后，我需要附加一些进一步的功能，以确保我有选择地复制某些类（只是愚蠢的 imo）。

在这里采用 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 中的错误吗？

4

2 回答 2

1

找到与 jQuery 关联的 css 文件，并尝试参考需要样式的 div 和不需要样式的 div 来编辑它。否则对于那些您不想要样式的按钮，只需将类或 id 更改为 css 文件中不存在的不同名称。

有时即使您更改了类（在 css 中类名在点示例“.class”之后）或 id（在 css 中，id 名在哈希“#id”之后），如果不是全部，有时可能会保留背景颜色等小的变化相同。为此检查对应于主要属性的 css 文件，如 or 或（在 css 中，属性名称放在方括号之间，例如“[title]”）。作为参考，您可以查看http://www.w3schools.com/css/

于 2013-02-04T12:08:21.390 回答
1

最终的答案落入了css中第一个c的领域。

如果您以正确的顺序将样式表放在页面上，则可以利用级联来正确覆盖内容。

JQuery 的“默认样式”非常具有侵略性，并且一些持久性通常会得到回报，尽管它可能意味着覆盖很多东西。

于 2016-08-13T23:34:20.453 回答