0

現在、コードの何が問題なのかわかりません。jquery を where に設定しif (i == 0)、ボタンをクリックすると、ボタンの背景が青色になり、変数 (i) が 1 に設定されます。次に、ボタンを灰色に戻すelse ifというステートメントがあります。if (i == 1)問題は、それが機能していないことです。助言がありますか？前もって感謝します！

Jクエリ

var i = 0;

$(document).ready(function() {
    if (i == 0) {
        $('button').click(function() {
            $(this).css({
            'background-color' : 'lightblue',
            'border' : '1px solid #5FA9CF'
            });
        });
        i = 1;
    }

    else if (i == 1) {
        $('button').click(function() {
            $(this).css({
            'background-color' : '#E0E0E0',
            'border' : '1px solid #CCC'
            });
        });
        i = 0;
    }
});
4

8 に答える 8

2

クリック イベント内で条件を作成する必要があります。

$(document).ready(function() {
    $('button').click(function(){
        if (i == 0) {
            $(this).css({
                'background-color' : 'lightblue',
                'border' : '1px solid #5FA9CF'
            });
            i = 1;
        }

        else if (i == 1) {
            $(this).css({
                'background-color' : '#E0E0E0',
                'border' : '1px solid #CCC'
            });
            i = 0;
        }
    })
});

何がしたいのかを書くと、それが明確になります。

DOM の準備ができたら ( $(document).ready())、

クリックしたいボタン（$('button).click()）

値が 0 の場合は、何かを実行します ( if(i == 0))

そうでなければ、それが別のものと等しい場合 ( else if(i == 1))。

于 2013-10-22T17:10:05.207 に答える
1

あなたはそれを移動することができifます...elseボタンクリック内で、またはCSSを使用して以下のようにスタイルを操作することもできます。

CSS:

.btn-lightblue { 
    background-color : lightblue; 
    border : 1px solid #5FA9CF; 
}

.btn-def { 
     background-color : #E0E0E0; 
     border : 1px solid #CCC; 
}

Javascript

$(document).ready(function() {
    $('button').click(function() {        
       if ($(this).hasClass('btn-def') {
          $(this).addClass('btn-lightblue').removeClass('btn-def');            
       } else {
           $(this).addClass('btn-def').removeClass('btn-lightblue');
       }
     });
});
于 2013-10-22T17:13:41.327 に答える
1 
var i = 0;

$(document).ready(function() 
{

        $('button').click(function() 
        {
           if (i === 0)
           {
            $(this).css({
            'background-color' : 'lightblue',
            'border' : '1px solid #5FA9CF'
            });

            i = 1;
           }
          else
          {
            $(this).css({
            'background-color' : '#E0E0E0',
            'border' : '1px solid #CCC'
            });

            i = 0;
          }
        });            
});
于 2013-10-22T17:14:42.503 に答える
1

問題は、ドキュメントの読み込み時に「このボタンを青くする」という単一のハンドラーをバインドしていることです。2 番目のハンドラーは実行されません。

試す：

$(document).ready(function() {
        $('button').click(function() {
         if (i == 0) {

           $(this).css({
            'background-color' : 'lightblue',
            'border' : '1px solid #5FA9CF'
            });
         i = 1;
         } else {
            $(this).css({
            'background-color' : '#E0E0E0',
            'border' : '1px solid #CCC'
            });
         i = 0;
         }
        });
}
于 2013-10-22T17:09:57.777 に答える
0

あなたのCSS:

.class1 {
     background-color: lightblue;
     border: 1px solid #5FA9CF;
}

.class2 {
     background-color: #E0E0E0;
     border: 1px solid #CCC;
}

あなたのJavascript

$(document).ready(function() {

     $('body').delegate('button', 'click', function() {

          if ($(this).hasClass('class1')) {
               $(this).toggleClass('class1', 'class2');
          }
          else {
               $(this).toggleClass('class2', 'class1');
          }

     });
});
于 2013-10-22T17:14:46.683 に答える
0

CSS でこれらのスタイル クラスを作成する必要があります。

(i == 0) の代わりに.hasClass http://api.jquery.com/hasClass/関数を使用できます

この種のものにはデリゲートも使用する必要がありますhttp://api.jquery.com/delegate/

于 2013-10-22T17:10:38.193 に答える