使用 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 选择器。我的想法是，如果 div 受支持，则使用 CSS3 方式显示，如果不支持，则使用 JavaScript 作为后备。我已经找到了this，这基本上就是我想要的。唯一的问题是如何检测是否支持 :checked 选择器？我在考虑 Modernizr，但似乎所有要做的就是在我的 CSS 中创建一个额外的 class，表示未检查（对吗？），这对我没有用，因为我想要在那种情况下运行一段 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();
}

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

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

Show div on radio button check using JS fallback

javascript

css

radio

checked

fallback