Question

我已经开始学习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

上的可运行副本

Answer 1

此脚本将继续将这些类添加到您的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');
    });

  });

Answer 2

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

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

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

  });

Answer 3

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

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

});

demo

jQuery单击处理程序只能运行一次

3 个答案: