Question

我有一系列书籍的参考网站，我想这样做，以便读者可以避免剧透。我的想法是创建一个设置网页，他们点击每个书的复选框，他们希望从中查看信息。然后，我可以将它（不知何故）存储为每次访问网站时的cookie，并使其适用于网站中的每个页面。所以，一个页面可能有这个：

<li class="teotw">Rand killed a Trolloc</li>

，另一个页面可能有

<li class="teotw">Nynaeve tugged her braid</li>

并且该信息不会显示在页面上，除非他们选中了“teotw”书的方框。我最初的想法是做类似切换CSS类值的事情：

document.styleSheets[0]['cssRules'][0].class['teotw'] = 'display:none';  
document.styleSheets[0]['cssRules'][0].class['teotw'] = 'display:inherit';

但我不确定这是不是最好的方法。首先，它只适用于当前文档，所以我需要一种方法将它重新应用到他们访问的每个页面。如果重要的话，我也在使用YUI。有关最佳方法的任何想法吗？

Answer 1

有很多方法可以实现它。您可以使用YUI样式表模块（阅读其User Guide以了解如何使用它），这将在您使用跨浏览器支持时进行考虑，并且比直接使用DOM更容易使用。

另一种方法是将类添加到页面的body。您可以定义如下样式：

.teotw {
  display: none;
}
.teotw-visible .teotw {
  display: block;
}

使用以下JS代码：

if (someCondition) {
  // show the hidden content
  Y.one('body').addClass('teotw-visible');
}

对于可见状态的持久性，您可以使用带有Cookie utilty的YUI CacheOffline或本地存储的Cookie。使用cookie的代码看起来像这样：

var body = Y.one('body');
if (Y.Cookie.get('teotwVisible')) {
  body.addClass('teotw-visible');
}
// change the cookie 
Y.one('#teotw-toggle').on('click', function (e) {
  var checked = this.get('checked');
  Y.Cookie.set('teotwVisible', checked);
  body.toggleClass('teotw-visible', checked);
});

您应该将不同的部分存储在JS对象中，并避免在每个JS行中对类名进行硬编码。或者可以在复选框ID和节类名之间使用约定。

为整个网站动态更新CSS类

1 个答案: