jquery クリックイベントの切り替え

Question

jqueryでcreateとdeleteの2つのイベントがあります。
削除と追加です

$(function() {
    $('#delete').on('click', function() {

と

$(function() {
    $('#create').on('click', function() {

このイベントを
createを実行したら
<button id="delete">ボタン</button>
deleteを実行したら
<button id="create">ボタン</button>

上記のように
切り替えてつかいたいのですが、そういったことはできるのでしょうか？
もしくはこういうパターンのときにするやり方などがあればアドバイスお願いいたします

以上、お願いします

Answer 1

id を書き換えるのは、NGだと思います。ID は不変であり、ユニークであるべきです。
そのような使い方をしたいのであれば、id ではなく、class の値を書き換えるべきです。当然そのような使い方をされるべきであるので、jQuery には toggleClass というメソッドが用意されています。

http://semooh.jp/jquery/api/attributes/toggleClass/class/

---

<style>
.text-red {
    color: red;
}
</style>
<div>
    <p id='toggle_class'>この要素にイベントをつける</p>
</div>

<script>
$(function(){
    $('#toggle_class').on('click', function(){
        $(this).toggleClass('text-red');
    });
});
</script>

---

<style>
.toggle-button > button {
    display: none;
}
.toggle-button > button.active {
    display: inline;
}
</style>
<div class="toggle-button">
    <button class="active">A</button>
    <button>B</button>
</div>
<script>
$(function(){
    $('.toggle-button > button').on('click', function(){
        $('.toggle-button > button').each(function(){
            if ($(this).hasClass('active')) {
                $(this).removeClass('active');
            } else {
                $(this).addClass('active');
            }
        });
    });
});
</script>

Comments

[creative_09]

ありがとうございます
idを書き換えるのはNGなんですね。
では、今回の場合、どのように実装するのが良いのでしょうか？toggleクラスで消えたり出したりなどといった形で再現するのでしょうか？

[退会済みユーザー]

toggleクラスじゃなくて、toggleClass だし、参考サイトも書きました。
コメントを読む限り、思考停止しているように見えるのですが、どうなんでしょうか？

[creative_09]

toggleClassはわかってるんですが、
サイトもみました。
toggleClassでつけたり外したりで再現できるのでしょうか？？
一日中やっていてここまで出来てきたので少し頭は限界かもしれませんが、真面目に聞いてます

[退会済みユーザー]

> toggleClassでつけたり外したりで再現できるのでしょうか？？

何をつけたり外したりしたいのか不明瞭です。

> 消えたり出したり

何をしたいのか不明瞭です。

[creative_09]

説明が足りずすみません。
createを実行したら
<button id="delete">ボタン</button>
を表示
deleteを実行したら
<button id="create">ボタン</button>
を表示
するように切り替えてつかいたいのです。
通常ではそういうやり方はしないという場合、アドバイスを頂ければ嬉しいです

[退会済みユーザー]

何がしたいのか全く読み取れないので、簡単なサンプル書きます。
あとは応用してください。

[creative_09]

ありがとうございます。
このコードの場合だと、
<p id='toggle_class'>この要素にイベントをつける</p>
が
<p id='toggle_class2222'>この要素にイベントをつける</p>

入れ替えたいのが理想なんですが
idは変更しないということなので、
display:noneなどで対応するのが一番なのでしょうか？
登録する
削除する
こんな感じをまるっと入れ替えたいのです

[退会済みユーザー]

何が一般的かという考えは捨てるべき。その先に何をするために、どう実装するのかを考えるのがプログラマの役割です。
単純に、表示非表示を切り替える場合、display:none でやってしまうと、再度ボタンを押せなくなり再表示できなくなりますよね？
こういう最終的になにをしたいのかを後出しされると、回答がブレるのです。

[退会済みユーザー]

結局、どんな機能を作るためのコードを書きたいのかを伝えてください。

[creative_09]

あーなるほど、それすらきづかなかったです。
displya:none

最終的ものは質問どおりです
createを実行したら
<button id="delete">ボタン</button>
deleteを実行したら
<button id="create">ボタン</button>
で表示を切り替えるもしくは、idを入れ替える。などして、
何回も交互にクリックできることです

[退会済みユーザー]

こういうふうに質問かけないですかね？

html 内に、button 要素を二つ配置しています。

<div>
<button>A</button>
<button>B</button>
</div>

ドキュメントの読み込み時はAのみ表示されていて、AをクリックするとBが表示され、Aは非表示になり、BをクリックするとAが表示され、Bは非表示になる。

この機能を実装するために、id の値を書き換えてみようと思ったのですが、その方法がわかりません。

[退会済みユーザー]

で、要件はこれでいいの？

[creative_09]

そういうことですね。。。すみません

[creative_09]

activeをつけたりはずしたりすることで
cssで操作するんですね。
ありがとうございます。
すごく参考になりました

[退会済みユーザー]

次からは、質問文をちゃんと推敲してくださいね。
無駄なやりとりが多くて疲れます。

[creative_09]

すみません。ありがとうございます

[creative_09]

すごく応用のきくコードをありがとうございました。
理解が深まり、かつ無事に設置できました。