0

こんにちは、
私はこれにまったく慣れておらず、頭を悩ませています。私はこれを短くしようとします...

ボタンは2×3です。それらの写真を見るには、このリンクをたどってください。 (私は写真ジェットを投稿することはできません...)
写真の上段のボタンは :hover クラスで、下段は標準です。6 つのボタンすべてに div があり、クラスごとに結合された css スタイル (.black1 + .black1:hover) があります。
(HTML):

<div><a id="black" href="#" class="black1">Black</a></div>
<div><a id="black_day" href="#" class="gr_light_off"></a></div>
<div><a id="black_month" href="#" class="re_light_on"></a></div>
<div><a id="white" href="#" class="red1">White</a></div>
<div><a id="white_day" href="#" class="gr_light_off"></a></div>
<div><a id="white_month" href="#" class="re_light_on"></a></div>

この例では、ボタン「black_month」と「white_month」にクラス「re_light_on」を追加しました。これでライトのスイッチが入ります。(このクラスは、HTML スクリプトに含めるべきではありません。) これは、「日」ボタンと「月」ボタンに 2 つのクラス (.._light_off & .._light_on) を設定したことを意味し、両方に独自のホバーがあります。 -スタイル。

計画:
body-tag に ID "body_bg" を与えました。デフォルトでは、これにはクラス「bg_gray」があります。誰かが「Black」ボタンをクリックすると、「body_bg」からクラス「bg_gray」が削除され、クラス「bg_black」がロードされます。これは次のように機能します (HTML):

<a id="black" href="#" onclick="$(body_bg).removeClass('bg_gray bg_white'),
$(body_bg).addClass('bg_black');">

「白」ボタンをクリックすると、逆になります。(「デフォルトにリセット」ボタンもあります)
質問 1:上記のスクリプトを HTML ページから外部の js ページに移動するにはどうすればよいですか? これを js ページに追加できれば、これに 'cookie.set' と 'cookie.del' 関数を追加して、サイトの別の部分を表示できるようにします。選択されました。

次に、残りの 4 つのボタンについて説明します。私はこれらも同様に機能しています(html):

<a id="black_day" href="#" class="gr_light_off" onclick="
$(this).removeClass('gr_light_off'), $(white_day).removeClass(),
$(this).addClass('gr_light_on'), $(white_day).addClass('gr_light_off');"></a>

これにより、両方の「日」ボタンを同時に点灯させることができなくなります。このスクリプトは、「white_day」ボタンの場合と逆で、両方の「月」ボタンの場合も同じです。
質問 2:同じ質問です。外部jsページからこれを機能させるにはどうすればよいですか?
私は多くのことを試しましたが、どうやら私は javascript を十分に上手に話せないようです。

最終的には、「黒」ボタンと「白」ボタンでこのブラウジング セッションの Cookie を設定し、「日」ボタンでその日の残りの Cookie を設定し (主に楽しみのため)、「月」ボタンで設定したいと思います。 1 か月間 Cookie を設定します。ブラウズ Cookie は削除されるべきではありませんが、日および月の Cookie よりも上位に表示されます。そして、日の Cookie は月の Cookie を上回る必要があります。
以下は、私が試した多くのことの1つです。あなたがそれを撃つことができるように;）

$(document).ready(function() {
  $("#black_day").click(function() {
    $(this).removeClass('gr_light_off');
    $(this).addClass('gr_light_on');
    $(white_day).removeClass();
    $(white_day).addClass('gr_light_off');
    $.cookie.del("styleday");
    $.cookie.set("styleday", "black", { path: '/', expiresAt: 23:59 });
  });
});

最後の質問: 2 x 3 ではなく、5 x 3 ボタンで別のスタイルシートを指示する 2 番目の計画があります。これをすべて行う簡単な方法はありますか???

あなたの時間と努力に感謝します。私は、私が犯すすべての間違いと、あなたが私に与えることができるすべての答えから学ぶことを知っています.

4

1 に答える 1

0

あなたの質問はよくわかりませんが、おそらくこの解決策が役立つでしょう

A1。

$('.black1').live('click', function(){
  $('#body_bg').removeClass('bg_gray bg_white').addClass('bg_black');
});

A2

$('.gr_light_off').live('click', function(){
  // remove all gr_light_on class on every button that has gr_light_on class
  $('.gr_light_on').removeClass('gr_light_on');
  // add gr_light_on to this button
  $(this).removeClass('gr_light_off').addClass('gr_light_on');

  // clear then set the cookies
  $.cookie.del("styleday");
  if($(this).is('#black_day')){
    $.cookie.set("styleday", "black", { path: '/', expiresAt: 23:59 });
  }
  else if($(this).is('#white_day')){
    // set cookie for white style
  }
});

$('.gr_light_on').live('click', function(){
  // opposite with gr_light_off
});

// repeat for re_light_off etc..

A3。A2を参照してください。

于 2011-07-23T07:09:43.750 に答える