クリックしたら文字が変わるボタンの実装

Question

「開く」と表示されているボタンが複数あったとして、クリックしたら文字が「閉じる」と変わるようにしたいのですが、一つのボタンをクリックしたら、その他のボタンの表示は「開く」に戻したいです。

<div class="btn">開く</div> 
<div class="btn">開く</div>
<div class="btn">開く</div>

HTMLでボタンはこのように配置されていて、ボタンを押したら開くコンテンツはボタンの下にはなく、デザインの都合上、サイドバーやヘッダーに散らばっています。

$(function () {
    $(".btn").click(function () {
        if ($(this).text() === "閉じる") {
            $(this).text("開く");
        } else {
            $(this).text("閉じる");
        }
    });
});

こうすると、一つのボタンをクリックすると「閉じる」に変化するのですが、別のボタンをクリックしたときに、さっき押したボタンは「閉じる」のままです。
なので、こうしてみたのですが、

$(function () {
    $(".btn").click(function () {
        $(".btn").text("開く");
        if ($(this).text() === "閉じる") {
            $(this).text("開く");
        } else {
            $(this).text("閉じる");
        }
    });
});

こうすると、別のボタンをクリックしたときに、前のボタンが「開く」と表示が戻ってくれるのですが、同じボタンをクリックしても「閉じる」のままで「開く」に戻ってくれません。
どうしたらいいのかわかりません。教えてください。
よろしくお願いします。

Comments

[seastar3]

ボタンの個数と各ボタンのidが分かった方が示しやすいです。

[m-i]

HTMLを変更したました。ボタンは３つから５つあって、idなどは付けていません。デザインの都合上ボタン自体が一つの場所にまとまっていなくて様々な場所にあるためです。どうぞよろしくお願いします。

[seastar3]

classでボタンの形状にするのはいいとして、個々のボタンに一意のidなりnameを振らなければ、一つだけ開くことはできません。
またループのためにそのidは、b01,b02,・・・等と規則的な名前を振る必要があります。
document.getElementById("b0".$i).Text = "開く"
もしくは
document.getElementById("b0".$i).Text = "閉じる"
をif文で組み込んだループを作る必要がありますから、
この getElementByIdメソッドを勉強してみましょう。

Answer 1

teritama さんのでうごかないならこんなかんじかな
動くサンプル

<div>
    <button type="button">開く</button>
</div><div>
    <button type="button">開く</button>
</div><div>
    <button type="button">開く</button>
</div><div>
    <button type="button">開く</button>
</div><div>
    <button type="button">開く</button>
</div><div>
    <button type="button">開く</button>
</div><div>
    <button type="button">開く</button>
</div>

$(function(){
    $(document).on("click", "button", function(){
        var text = $(this).text();
        $("button").text("開く");
        if (text === "開く") {
            $(this).text("閉じる");
        }
    });
});

Comments

[m-i]

回答ありがとうございます。無事実装出来ました！ありがとうございました！

Answer 2

ヒントだけで恐縮ですが、ボタンを押したらそのボタン番号を変数に記録します。
そして、各ボタンの文字は、自分の番号とその変数の値が等しいときに"開く"の文字を表示し、異なるときには"閉じる"の文字を表示するようにします。

Comments

[m-i]

回答ありがとうございます。for文を使うのでしょうか？今調べているのですが、自分で解決するのが難しそうです。誠に恐縮なのですが、お時間があればコードを書いていただけると助かります。またボタンの数は決まっておらず、サイトを更新するにあたって増えることもあると思うのですが、その場合も上記のやり方でいけますか？

[seastar3]

ボタンのidのルールを示して下さい。
ボタンの数はループの終了判定の際の数を書き換えるだけで済むでしょう。

Answer 3

こんな感じの動作であってますかね。

動作確認

$(function () {
    $(".btn").click(function () {
        if ($(this).text() === "閉じる") {
            $(this).text("開く");
        } else {
            $(".btn").text("開く");
            $(this).text("閉じる");
        }
    });
});

Comments

[m-i]

回答ありがとうございます。試してみたのですが、最初に書いたコードの実装結果とほぼ同じになりました...。他のボタンは変わるけど。今押したボタンをもう一度押しても「開く」にもどってくれません。どうしてでしょうか...。