jQueryでクリックイベントが続けられないし一緒に動いてしまう。

Question

###前提・実現したいこと
複数liリストの部分をクリックすると右側のspanで囲んだ記号が「+」の時に「-」に、「-」の部分が「+」なるようjQueryでイベントを設定したいです。
しかし、イベントを仕込むと
・複数のliのspanが同時に動く
・「+」から「-」には変更になるが、「-」から「+」にはならない
という風に思うように動きません。

コードは以下のように書きました。

###該当のソースコード

  <ul>
    <li class="btn">クリックすると変わる<span class="toggle">+</span></li>
    <li class="btn">クリックすると変わる<span class="toggle">+</span></li>
  </ul>

$(function(){
  $(".btn").on("click",function(){
    if($(".toggle").text() == "-"){
      $(".toggle").text("+");
    } else {
      $(".toggle").text("-");
    }
  });
})

###試したこと
.togleをthisにしたりelse以下のelse ifで「"+"の時に"-"に変更する」など変更してみました。

お願い致します。

Answer 1

クリックイベント内で$(".toggle")とした場合、クラス属性にtoggleを持つ全ての要素が対象となるため、全ての「+」が「-」に置き換わる状態です。

以下のようにして、クリックされた要素の子要素のみが書き換わるようにしてください

$(function(){
  $(".btn").on("click",function() {
    var $toggle = $(this).find('.toggle');
    if($toggle.text() == "-"){
      $toggle.text("+");
    } else {
      $toggle.text("-");
    }
  });
});

Comments

[satoko]

ありがとうございます！
試したところ、自分の思う通りに動きました。
他の回答者様のコードを試しましたが、一番迅速かつスマートなコードだったのでベストアンサーにさせていただきました。
また、thisの書き方もクラスにつなげて書いていいことは初めて知りました。

回答してくださったかたありがとうございます。

[退会済みユーザー]

念のためですが、「this」ではなく「$(this)」として、jQueryオブジェクト化していることに注意してください。

Answer 2

$(".toggle")という指定だと、ドキュメントに存在するすべてのtoggleクラスが対象になるので、連動してしまうのです。
クリックされたボタンの子要素であるtoggleクラスを対象にしたいのですから、find()を利用しましょう。

$(function(){
  $(".btn").on("click",function(){
    var tog = $(this).find(".toggle");
    if(tog.text() == "-"){
      tog.text("+");
    } else {
      tog.text("-");
    }
  });
})

Answer 3

$(".toggle")だとドキュメント内にあるすべてのtoggleクラスを持つ要素のjQueryオブジェクトが取得されてしまうため、正しく動作していないのだと思います。
イベントを発火した要素内にあるもののみ取得するには、$(".toggle",this)のようにします。

$(function(){
  $(".btn").on("click",function(){
    if($(".toggle",this).text() == "-"){
      $(".toggle",this).text("+");
    } else {
      $(".toggle",this).text("-");
    }
  });
})