1

我有一个系列书籍的参考网站，我想制作它，以便读者避免剧透。我的想法是制作一个设置网页，他们在其中单击要查看信息的每本书的复选框。然后，我可以在他们每次访问该站点时（以某种方式）将其存储为 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。关于这样做的最佳方式的任何想法？

4

1 回答 1

2

有很多方法可以实现它。您可以使用 YUI 样式表模块（请阅读其用户指南了解如何使用它），它可以实现您正在考虑的跨浏览器支持，并且比直接使用 DOM 更容易使用。

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

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

使用以下 JS 代码：

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

对于可见状态的持久性，您可以使用带有 YUI Cookie 实用程序的 cookie 或带有CacheOffline的本地存储。使用 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 和部分类名称之间使用约定。

于 2012-12-29T01:24:30.530 回答