-1

私はjQueryが初めてで、すべてのクラスを変更せずにクリックしてボタンの色を変更する必要があります。どうすればそれができますか。

<div class="button">First button</div>
<div class="button">Second button</div>
<div class="button">3 button</div>
<div class="button">4 button</div>

$('.button').on('click', function() {
    $('.button').css('background-color', '#C00');
})

.button {
    background-color: #9C0;
    height: 50px;
    width: 100px;
    margin-top:5px;
}

http://jsfiddle.net/nJ895/

最初のボタンをクリックすると、すべてのボタンではなくクリックしたボタンだけで色を変更する必要があるので、それを行う方法はありますか?

アップデート：

申し訳ありませんが、あなたのソリューションを試してみましたが、私のコードはより複雑で、それでは機能しません: http://jsfiddle.net/nJ895/7/

ここでいくつかの問題を解決する必要があるので、「1ボタン」をクリックするとこのボタンの色が変わる必要がありますが、「2ボタン」をクリックすると「1ボタンは色を失う必要があります」と「2ボタンは色を取得する必要があります」.. .これは、同じように動作する必要がある他のdivの2番目の「1ボタン」と「2ボタン」に影響を与えません...助けてください。#id_ もこの場合は重要ではありませんが、すべてのコードを表示するにはここで必要です。

4

4 に答える 4

1 
$('.button').on('click', function() {
    $(this).css('background-color', '#C00');
});

更新されたデモ：http：//jsfiddle.net/nJ895/1/

あなたはjQueryを初めて使用するので、何が起こっているのかを説明します。元のコードでは、のクラスを持つすべてのノードを選択し.button、クリックイベントをそれらすべてにバインドしています。それらのいずれかがクリックされると、すべてのノードを再度選択し、CSSをそれらすべてに適用します。オブジェクトは、$(this)発生したばかりのイベントにバインドされているノードを指し、CSSをその適切なノードにのみ適用します。

リテラルCSSを適用する代わりに、新しいクラスを追加することを検討することをお勧めします。それはあなたがあなたのスタイルをあなたのJavaScriptコードから遠ざけることを可能にするでしょう。

CSS：

.button {
    background-color : #9C0;
    height           : 50px;
    width            : 100px;
    margin-top       : 5px;
}
.button.active {
    background-color: #C00;
}

jQuery：

$('.button').on('click', function() {
    $(this).toggleClass('active');
});

デモ： http： //jsfiddle.net/nJ895/3/

または、一度に1つのボタンだけを選択する場合：

$('.button').on('click', function() {
    $(this).addClass('active').siblings().removeClass('active');
});

デモ： http： //jsfiddle.net/nJ895/5/

于 2013-03-12T17:20:50.800 に答える
0

使ってみてください$(this)

$(this).css('background-color', '#C00');

あなたの場合、あなたは。という名前のコレクションですべてのボタンをターゲットにしていました$('.button')。イベントを取得した現在のオブジェクトにイベントをキャプチャする必要があります。

于 2013-03-12T17:21:15.463 に答える
0 
jQuery('.button').live('click', function() {
    jQuery(this).css('background-color', 'red');
})
于 2013-03-12T17:51:16.550 に答える
0

thisクリックした要素をターゲットにするために使用する必要があります

$('.button').on('click', function() {
    $(this).css('background-color', '#C00');
})

ただし、色を変更するより正しい方法は、追加のクラスを使用することです

CSS

.button {
    background-color: #9C0;
    height: 50px;
    width: 100px;
    margin-top:5px;
}
.button.active{
    background-color: #c00;
}

jQuery

$('.button').on('click', function() {
    $(this).addClass('active');
});

http://jsfiddle.net/nJ895/2/のデモ

于 2013-03-12T17:24:28.857 に答える