0

Just found out about the CSS tilde selector and it seems like it could be an elegant way to handle toggling input visibility.

The use-case I have in mind is when you only want to display an input to the user when they have checked a checkbox. Currently I do this with javascript and attach listeners to each checkbox, which then search through the DOM to find the appropriate input and toggle a class.

So the question is, why is this bad? And if it isn't, why isn't this prevalent? Why do we do this with .js rather than CSS? It seems to me they are both manipulating the presentation layer in fairly similar ways...

Bonus points for resources.

4

3 回答 3

1

HTML 是模型，它包含数据
CSS 是视图，它包含样式
JS 是控制器，它包含交互

这种 MVC 结构实现了强大的责任委派。当您想更改页面上小部件的状态时，可以使用 JavaScript 更改可用的样式挂钩：

jQuery 用于简洁 
$('#button').on('click', function () {
    $('#widget').toggleClass('hidden');
});
CSS： 
.hidden {
    display: none;
}

使用此结构可以轻松更改交互的执行方式。如果您稍后决定小部件应该是动画的，这是一个简单的更改。

使用 JavaScript 还具有向后兼容的优势。禁用 JavaScript 的用户比例非常少。虽然我强烈建议支持禁用 JS 的人，但通常可以通过默认显示所有内容并仅为启用 JS 的用户隐藏内容来完成。

于 2013-02-06T16:23:41.303 回答
0

我会说，如果您可以摆脱使用波浪号选择器或一般的 css，那么就去做吧。CSS imho 是一种更简洁、通常更简洁、性能更优越的方式来完成与在 js 中切换项目相同的事情。另外，对波浪号的浏览器支持非常好 - 请参阅http://www.quirksmode.org/css/contents.html

有时您必须使用 javascript 来完成此操作，例如要隐藏的元素不是相关元素的同级或后代。

于 2013-02-06T16:29:36.813 回答
0

我想到的用例是当您只想在用户选中复选框时向用户显示输入。

如果您打算为此使用:checked选择器，您的应用程序将无法在旧浏览器（IE < 9）中运行。如果你对这个限制没意见，也就是说，只关心现代浏览器，CSS 也可以。

如果用户启用了 JS，使用 JS 可以确保您的网站也可以在旧版浏览器上运行。

您也可以混合使用这两种方法，即使禁用 JS 以及启用 JS 的旧浏览器，它也能确保您的页面在现代浏览器中正常工作。

<noscript>检测浏览器是否禁用了 JS（例如使用内部样式表）通常比确定浏览器是否支持某些 CSS 选择器更容易。
因此，使用 JS 解决方案可以让您轻松放置免责声明，要求用户启用 JS 以使页面正常工作。

但是，如果您的网站不是针对可能使用 IE8 及以下版本的公众，那么 CSS 解决方案就可以了。

于 2013-02-06T16:22:37.327 回答