clickした際に、対象以外の効果を消す方法について

Question

クリックを行った際に、1つだけに効果を持たせたいので、他の要素に反映された効果を無くしたいのですが何か他への打消しの定義方法があれば教えて頂けないでしょうか？

<div id="listbox">
<ul>
  <li>text</li>
  <li>text</li>
  <li>text</li>
  <li>text</li>
  <li>text</li>
</ul>

.pink {
color:pink;
}
.blue {
color:blue;
}

$(function() {
$('li').click(function() {
 $(this).toggleClass("pink");
});

$(function() {
$('li').click(function() {
 $(this).addClass("pink");
});

toggleClassの場合もaddClassの場合も、複数選択ができてしまい色を変えることができてしまいます。
そうではなく、1つを選択した状態で他をクリックすると、今まで適用されていた要素からは効果が削除され、最新でクリックした要素のみに効果を適用するみたいなことが行いたいのですが、こういった場合にはどのような指定を行えばよろしいでしょうか？

同じ感じで、hideとかで消す場合も、他をクリックした場合には、今まで消えていたものをshowさせたりしたいです。

どうぞよろしくお願いいたします。

Answer 1

siblings()で自分以外の兄弟要素を取得できます。

$(function() {
  $('li').click(function() {
    $(this).toggleClass("pink")
           .siblings().removeClass("pink");
  });
});

Comments

[yukina00235]

有難うございます。
.siblings　というものがあるのですね、試したところ意図する動きとなりました。
有難うございました。㎜