javascript - 使用 JS 后备在单选按钮检查上显示 div

Question

我正在构建一个网站，其桌面版本一次显示 10 张图像 (5x2)，这在小型智能手机显示屏上显然不太好看。为了克服这个问题，我制作了 10 个单选按钮(仅在网站的移动版本上显示)并且只显示伴随选中的单选按钮的图像。这很容易用 HTML 和 CSS3 实现，如下所示:

HTML:

<input type="radio" name='pdr' id="pdr1"><label for="pdr1"> Click here</label>
<div class="populardevice" id="populardevice1">stuff in this div</div>

CSS:

.populardevice {
  display: none;
}
input#pdr1:checked ~ #populardevice1 {
  display: inline;
}

问题是旧版浏览器不支持 :checked 选择器。我的想法是，如果支持，则使用 CSS3 方式显示 div，如果不支持，则使用 JavaScript 作为后备。我已经找到了 this ，这基本上就是我想要的。唯一的问题是如何检测是否支持 :checked 选择器？我在考虑 Modernizr，但似乎所有要做的就是在我的 CSS 中创建一个额外的类，上面写着 no-checked(对吗？)，这对我没有用，因为我想在其中运行一段 JS案件。或者 Modernizr 是否适合这种情况，像这样利用它(伪代码 - 我还不知道如何编写这个但如果它是解决方案，我会找出如何):

if (Modernizr.:checked supported) {
  use that and terminate this function;
} else {
  Execute the JavaScript function from the link above;
}

或者你们建议我实现一些完全不同的东西？

提前致谢。

Answer 1

来自Modernizr website :

Using Modernizr with JavaScript

The Modernizr object

Modernizr keeps track of the results of all of it's feature detections via the Modernizr object. That means that for each test, a corresponding property will be added. You just have to test for truthiness in your code to figure out what you want to do

if (Modernizr.awesomeNewFeature) {
  showOffAwesomeNewFeature();
} else {
  getTheOldLameExperience();
}

所以你的伪代码非常接近!