ボタンをクリックすると残りのボタンの色が変わります

Question

ボタンをクリックすると100個のボタンがあるとします。残りの99個のボタンの色を変更したいとします。これを達成する方法は？ 100個のボタンすべてにクリックイベントハンドラを追加するのは良い考えではありません。これを達成するためのさまざまな方法を教えてください。ありがとうございました。

Answer 1

はなぜこの

$(document).on('ready',function(){ 
$('button').click(function() { 
    $('button').css('background', 'red'); 
    $(this).css('background','none'); 
    }); 
}); 

をしませんはるかに簡単に見える

Answer 2

これはどうですか？ （http://jsfiddle.net/nw77tgya/）

もちろん、コードを味わうことができます。ボタンセレクターをクラスセレクターに置き換えて、ボタンの選択範囲を狭めることができます。

また、クラスを追加したり削除したりするなど、CSSを変更することもできます。

この例でいえ途中であなたを取得する必要があります;）

$(document).on('ready',function(){ 
 
$('button').click(function() { 
 
    $('button').not($(this)).css('background', 'red'); 
 
    $(this).css('background','none'); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button>A Button</button> 
 
<button>A Button</button> 
 
<button>A Button</button> 
 
<button>A Button</button> 
 
<button>A Button</button> 
 
<button>A Button</button> 
 
<button>A Button</button>

Answer 3

あなたはこのように、バニラJSでこれを行うことができます。

var buttons = document.querySelectorAll('button'); 
 

 
[].forEach.call(buttons, function(btn) { 
 
    btn.addEventListener('click', function() { 
 
    var clickedButton = this; 
 
    [].forEach.call(buttons, function(innerBtn) { 
 
     if (innerBtn !== clickedButton) { 
 
     innerBtn.classList.add('green'); 
 
     } 
 
     else { 
 
     innerBtn.classList.remove('green'); 
 
     } 
 
    }); 
 
    }); 
 
});

.green { 
 
    background:green; 
 
}

<button>Button</button> 
 
<button>Button</button> 
 
<button>Button</button> 
 
<button>Button</button> 
 
<button>Button</button> 
 
<button>Button</button> 
 
<button>Button</button> 
 
<button>Button</button> 
 
<button>Button</button> 
 
<button>Button</button> 
 
<button>Button</button>

あるいは、短いjQueryの中：

var buttons = $('button').click(function(){ 
 
    buttons.not(this).addClass('green'); 
 
    $(this).removeClass('green'); 
 
});

.green { 
 
    background:green; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button>Button</button> 
 
<button>Button</button> 
 
<button>Button</button> 
 
<button>Button</button> 
 
<button>Button</button> 
 
<button>Button</button> 
 
<button>Button</button> 
 
<button>Button</button> 
 
<button>Button</button> 
 
<button>Button</button> 
 
<button>Button</button>

Answer 4

HTMLにボタンを作成し、jQueryのでselectorを書き込むため容易にするためにclass-nameまたはnew attributeを追加します。

<button class="test">button1</button> 
<button class="test">button2</button> 
<button class="test">button3</button> 

selectorを定義することにより、のjQuery内のすべての要素を選択し、現在の要素を除くすべての要素にCSSを追加します。 、第2クリックで作業することについては、我々はに現在の要素

$(".test").click(function(){ 
    $(this).css("background-color", ""); 
    $(".test").not($(this)).css("background-color", "red"); 
}); 

Answer 5

のCSSをリセットする必要があります。ここ無地のJavaScriptソリューションです。 これは、querySelectorAllに供給されたセレクタに一致するすべての要素をルックアップし、それらをループし、クリックされたボタンでない場合は - e.target - クラスをあなたがどこかでスタイリングしたものに設定します。

あなたのボタンが持っていない場合は、クラス：

button.addEventListener('click', function(e) { 
    e.target.className = '' 
    [].forEach.call(document.querySelectorAll('button'), function(b) { 
    if (b !== e.target) { 
     b.className = 'other-color' 
    } 
    }) 
}) 

元のクラスが '普通のボタンが' の場合：

button.addEventListener('click', function(e) { 
    e.target.className = 'plain-button' 
    [].forEach.call(document.querySelectorAll('.plain-button'), function(b) { 
    if (b !== e.target) { 
     b.className = 'plain-button other-color' 
    } 
    }) 
})