jQueryのaddClass(removeClass)について。

Question

はじめまして。

現在jQueryにおいて、以下のようなhtmlのdivにクリックしたとき、一カ所のみ色が変わるようなコードを実装したいと考えています。

<div class="sample">あいうえお</div>
<div class="sample">あいうえお</div>
<div class="sample">あいうえお</div>
<div class="sample">あいうえお</div>

そこで以下のように、クリックをした際一つのみ色が変わるところまでは実装できたのですが、他の箇所をクリックした時に元の箇所は色が付いたままになってしまいます。

このような場合、どのようなコードに修正すればよいでしょうか?
何かお分かりの方は是非ともご教授のほどよろしくお願いします。

$(document).on('click', '.sample', function(){
  $(this).addClass('test');
});

.gray{background:#808080;color:#fff;}

Answer 1

$(document).on('click', '.sample', function(){
  $(this).siblings('.test').removeClass('test');
  $(this).addClass('test');
});

入れ子になったりせず、必ず兄弟要素であるならば

$(document).on('click', '.sample', function(){
  $(document).find('.test').removeClass('test');
  $(this).addClass('test');
});

. sampleがあっちこっち散らばっててどこにあるのかわからないが
とりあえず.testがつくのはdocument中に一つだけって場合

Comments

[Shinog]

素早いご回答ありがとうございます！
上記のコード通りに修正して、無事解決しました。