我可以使用 CSS 来指定要使用选择器设置的类吗？答案

【问题标题】：Can I use CSS to specify classes to set by using selectors?我可以使用 CSS 来指定要使用选择器设置的类吗？
【发布时间】：2012-04-24 17:35:46
【问题描述】：

我希望我的所有 JQuery Mobile 页面尽可能使用输入搜索字段的迷你版。

我查看了示例页面，很明显我想要将类.ui-input-search 的所有元素设置为也分配类.ui-mini。

为什么不使用data-mini="true" 属性呢？因为指定data-filter="true" 列表视图让JQM 自动生成输入搜索元素：我没有机会指定我想要它的迷你版本。

目前的解决方案：

<script type="text/javascript">
  $(function () { $('.ui-input-search').addClass('ui-mini'); });
</script>

有没有（本质上更优雅的）CSS 解决方案？像

.ui-input-search {
  setClass(ui-mini); /* this line is pseudo-code */
}

【问题讨论】：

您当前的解决方案似乎是合适的解决方案...我不知道在 CSS 中执行此操作的任何方法
你能附上jQuery移动脚本来使用带有.ui-input-search的字段的迷你版吗？当已经有一个类开始时，必须通过一个类来选择一个类来附加一个要执行的类似乎很愚蠢。
@SurrealDreams 你到底是什么意思？难道我不需要在javascript代码中找到设置类ui-input-search的每个实例，并将ui-mini类添加到每个实例中吗？我刚才描述的听起来像是一种黑客行为，会在以后造成很多痛苦和痛苦。
我只是想知道您是否不能将迷你输入行为附加到 .ui-input-search 类 - 它已经存在并且听起来像是一个合适的选择目标。
少看：lesscss.org

【解决方案1】：

您可以为特定的伪页面绑定pageinit 事件，而不是使用document.ready，在该伪页面上存在带有搜索小部件的列表视图。

$(document).delegate('#some-page-id', 'pageinit', function () {
    $(this).find('.ui-input-search').addClass('ui-mini');
});

这是绑定事件处理程序的“jQuery Mobile”方式，确保它在任何时间范围内都能正常工作。

【讨论】：

感谢您写下这个答案！它促使我阅读alfajango.com/blog/…，这很有启发性。
这看起来是一个很好的指南，也可以在这里查看 jQuery Mobile 文档：jquerymobile.com/demos/1.1.0/docs/api/events.html
假设我想将它应用到我所有的伪页面，而不仅仅是一个特定的页面。我可以将第一行修改为$(document).delegate('.ui-page', ... 吗？唔。然后我也必须改变它的其余部分。我看到你的代码做了什么。它巧妙地仅将类应用于匹配的伪页面上的特定相关.ui-input-searchs。
是的，但不是。 .ui-page 类是在元素初始化后添加的；所以为了安全起见，您应该使用[data-role="page"]，因为该属性始终存在于元素上：$(document).delegate('[data-role="page"]', 'pageinit', function () {...});
不知道 jQ 可以处理这种语法。凉爽的。谢谢。

【解决方案2】：

我总是更喜欢 CSS 解决方案而不是布局而不是 javascript..

<link rel="stylesheet" href="mini.css" media="only screen and (max-device-width:768px)"/>

OR 在普通的 CSS 中：

@media only screen and (max-width: 767px) { 
    .ui-input-search {
        height: auto;
        width: 80px;
    }
}

【讨论】：