使用jquery根据操作系统隐藏CSS元素答案

【问题标题】：Hide CSS element dependant on operating system using jquery使用jquery根据操作系统隐藏CSS元素
【发布时间】：2013-03-22 22:34:07
【问题描述】：

我试图简单地隐藏/显示一个元素，具体取决于您使用的是 mac、windows、iphone、ipad 等。

我有 2 个 p 元素： p1 - 我想在 Windows 上显示 p2 - 我想在其他所有设备上显示（mac/iphone/ipad 等）

我在这里找到了一个明显检测操作系统的脚本：http://www.stoimen.com/blog/2009/07/16/jquery-browser-and-os-detection-plugin/

所以我在链接到 jquery 之后链接到脚本，加上这个到页头：

if ($.client.os == 'Mac') {
    $('#download').hide(); $('#register').show();
}

if ($.client.os == 'iPhone') {
    $('#download').hide(); $('#register').show();
}

if ($.client.os == 'Windows') {
    $('#download').show(); $('#register').hide();
}

我无法让它工作，有什么想法吗？

【问题讨论】：

$.client.os 的值是多少？有什么错误吗？您可能希望查看用户代理而不是操作系统。
你应该将操作系统的类添加到body标签中，并根据body类将你的东西隐藏在CSS中
你是否包含 jquery.client.js
@TamilSelvan 是的，我包括了它。
@Huangism 你有这方面的例子吗？

标签： javascript jquery css show-hide

【解决方案1】：

This thread 为您的问题提供了一些解决方案。鉴于您指定的属性，您需要做的就是：

if (navigator.appVersion.indexOf("Win")!=-1) {
    $('#register').hide();
    $('#download').show();
}

您不需要显式显示元素，因为客户端不会更改操作系统。只需将#download 和#register 的基本可见性设置为您的“默认”配置（将#download { display: none; } 放入您的CSS）并在必要时让.hide() 和.show() 覆盖它们。

如果您需要更高级的操作系统检测，可以通过将"Win" 替换为适当的操作系统标签来添加其他规则。

EDIT 修复了 jsFiddle：http://jsfiddle.net/2G4pz/5/

【讨论】：

感谢 metadept，但如果我有 2 个元素，这没有意义，如果在 mac/Ios 上，则必须隐藏元素 1 并显示元素 2，然后在 Windows 上隐藏元素 2 并显示元素 1 . 我在这里说得通吗？
@James 是的，我只是说您不需要更改每种情况的可见性，默认情况下您可以为 Mac 拥有所需的东西，然后您只需要在用户使用 Windows 时更改它们。如果您想显式设置它们，那很好，但不是必需的。
谢谢你，所以你说只要我的 css 中有 #download {display:none;} 上面的脚本就会在 Windows 机器上覆盖它并隐藏 #register 和显示#download ?
@James 没错。这是一个（非常非常简单的）jsFiddle，它演示了我在说什么：jsfiddle.net/2G4pz/3
谢谢@metadept 我使用了你上面的代码并在 Windows 机器上进行了测试，但仍然得到注册 div 而不是下载？