1

連載本の参考サイトを作っているのですが、ネタバレを避けられるようにしたいと思います。私が思いついたのは、情報を見たい各本のチェックボックスをクリックするセットアップ Web ページを作成することでした。その後、サイトにアクセスするたびに (何らかの方法で) Cookie として保存し、サイト内の各ページで機能させることができます。したがって、1 つのページには次のようなものがあります。

<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 に答える