1

我已经开始学习 jQuery 并且正在学习一些非常简单的示例，但已经遇到了问题。单击白天按钮时，我正在更改正文，然后再次为夜间按钮更改不同的背景。

我发现单击处理程序仅工作一次，如果我先单击夜间按钮，那么白天按钮将不起作用？任何人都可以为此提供建议或分享最佳实践吗？

这是我到目前为止的代码：

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
 <body>

  <h1>My Website</h1>

  <button id="first">Day</button>
  <button id="second">Night</button>



  <script>
  $(function() {
    $('button#first').click(function() {

      $('body').addClass('day');
    });
    debud

    $('button#second').click(function() {

      $('body').addClass('night');
    });

  });

  </script>
</body>
</html>

http://jsbin.com/ufadul/3/edit上的可运​​行副本

4

3 回答 3

7

此脚本将继续将这些类添加到您的 body 标记中，而不是替换它们。由于在 CSS 中的位置而.night优先。.day

使用以下方法来防止这种情况发生：

$(function() {
    $('button#first').click(function() {
      $('body').removeClass('night');
      $('body').addClass('day');
    });

    $('button#second').click(function() {
      $('body').removeClass('day');
      $('body').addClass('night');
    });

  });
于 2012-08-01T09:16:57.120 回答
2

尝试删除课程，这应该可以解决您的问题

$(function() {
    $('button#first').click(function() {
      $('body').addClass('day');
      $('body').removeClass('night');
    });

    $('button#second').click(function() {
      $('body').addClass('night');
   $('body').removeClass('day');
    });

  });
于 2012-08-01T09:18:23.547 回答
0 
$(function() {
    $('button#first').click(function() {
      $('body').attr('class','day');
    });

    $('button#second').click(function() {
      $('body').attr('class','night');
    });

});

演示

于 2012-08-01T09:23:10.800 回答