0

大家好，
我对此很陌生，而且我的头脑很混乱。我会尽量保持简短...

我有 2 x 3 按钮。请点击此链接查看他们的照片。 （我不能张贴图片jet...）
在图片中的上排按钮是: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”。当有人单击“黑色”按钮时，“body_bg”会删除“bg_gray”类并加载“bg_black”类。这就像这样（HTML）：

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

单击“白色”按钮则相反。（还有一个“reset default”按钮）
问题 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设置一个月的cookie。浏览 cookie 不应删除，但应高于日和月 cookie。日 cookie 的排名应该超过月 cookie。
以下是我尝试过的许多事情之一。只是这样你就可以射击它;）

$(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 按钮，用于指示备用样式表。有没有更简单的方法来做这一切？？？

我感谢您的时间和精力。我知道我从我犯的每一个错误和你能给我的每一个答案中学习。

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 回答