jQueryによるテキストの切り替えができない

Question

##実装したいこと
下記のソースでbuttonクラスをクリックすると、それに隣接したtextクラスを表示/非表示を切り替え、
textクラスが表示されている場合はbuttonクラスのテキストを、「隠す」
textクラスが非表示の場合は「元に戻す」と表示したいです。

$(function() {
	$('.button').click(function() {
		$(this).next('.text').toggle(200, function() {
			if ($('.button').text() === "隠す") {
				$('.button').text("元に戻す");
			} else {
				$('.button').text("隠す");
			}
		});
	})
});

<div class="button-contents">
	<p class="button">隠す</p>
	<p class="text">
		テキスト
	</p>
</div>

<div class="button-contents">
	<p class="button">隠す</p>
	<p class="text">
		テキスト
	</p>
</div>

##質問したいこと
表示/非表示は切り替えられるのですが、textクラスの文言が変わりません。どうしればよいのでしょうか。

##備考
consoleを除いたところ、エラーは吐いていませんでした。
jQueryのバージョンは2.1.4です。

Answer 1

$('.button').text() は全ての.button要素のテキストを取得してしまうので、2つあれば隠す隠すというテキストが返って来ます。

$(function() {
    $('.button').click(function() {
        var $_b = $(this); // .buttonを特定
        $_b.next('.text').toggle(200, function() {
            if ($_b.text() === "隠す") { // 特定されたボタンの状態を確認
                $_b.text("元に戻す");
            } else {
                $_b.text("隠す");
            }
        });
    })
});
```**動くサンプル：**[https://jsfiddle.net/qgr8uodt/](https://jsfiddle.net/qgr8uodt/)

Comments

[nyoro]

詳しく回答してくださり、ありがとうございます！！こちらの画面でも動かすことに成功しました。
当方浅学で大変恐縮なのですが、後学のために
var $_b = $(this); // .buttonを特定
の意味をもう少し詳しくご説明頂けますでしょうか。
$_bに$(this)を代入しているので、$_bを全て$(this)に書き換えても動くかと思って少々ソースを触らせて頂いたのですが、このように記述すると$(this)がtextクラスを取得してしまうのは何故なのでしょうか？

[kei344]

ざっくり書くと this は function ごとに変わるので、置き換えただけでは動きません。toggleに渡したfunction内のthis はクリックしたボタンの次にある.textです。
「JavaScript this 」で検索してみてください。

[nyoro]

そんな仕様があること自体しりませんでした。。ありがとうございます！

Answer 2

toggleの中でやる必要がある作業でしょうか？

$(function() {
    $('.button').click(function() {
      $(this).next('.text').toggle(200);
      $(this).text($(this).text()=="隠す"?"元に戻す":"隠す");
    })
});