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