jqueryでクリックで文字の変更→もとに戻すの記述方法

Question

jqueryでクリックした際に文字を変更させ、再度クリックすると元に定義されていた文字に戻したいのですが、何とかできたのですが、何か違和感があります。
もっと効率的な書き方がありそうなのですが、どのようにすると良いでしょうか？

というのも、現在の定義だとHTML側のリストという名称を変更した場合、jquery側も変更が必要になってしまうので、なんと言いますか、toggle的なもので、変更前、変更後を切り替えるような方法などありましたらアドバイスをお願いいたします。

    <ul>
      <li>リスト</li>
      <li>リスト</li>
    </ul>

      $(function () {
        $("li").click(function () {
          var change = "変更しました！";
          if ($(this).text() === "リスト") {
            $(this).text(change);
          } else {
            $(this).text("リスト");
          }
        });
      });

Comments

[m.ts10806]

要件通りできてればそれが正解なので、
見直すなら観点を明確にするところからかと思います。
1つのゴールに向かうためのルートは無数にあります。

Answer 1

jQuery的にはdata-*属性を使うことが多いかな、と思いました。
jQuery.data() | jQuery API Documentation

---

その他、CSSの疑似要素で表現したり、display: noneなどで不可視にした子要素を置いておいてCSSで表示を入れ替えたり、なんならsetterを使ってデータバインディングをしたり、など、いろいろな方法があると思います。

Answer 2

変更前のli要素の文字列を、外部変数に保持しておき、
クリック都度の文字列と、その変更前の文字列を格納した変数を比較して、
処理を分けるとよいかと。

Comments

[yukina00235]

有難うございます。
li自体の内容をjqueryの変数に格納して表示する場合、HTML側にはjqueryとして表示を行うのですよね？
そうなるとHTML側には実態が無い<li>の内容になってしまわないでしょうか？
何か勘違いがありそうなのですが、もしよろしければもう少し詳しく教えて頂けないでしょうか？

[miyabi_pudding]

> HTML側には実態が無い<li>の内容になってしまわないでしょうか？

そんな要件、質問には一切書かれていませんので、
知りません。
元のHTMLが静的に存在しているものとしての回答です。
最初にその静的なテキストを変数に格納して、クリックした毎に比較する、という考え方です。

記載していない要件があるならば、質問本文にしっかり記載してください。

[yukina00235]

有難うございます。
自分でも把握できていないので、質問がおかしいのだと思います。
変数を使って色々と試してみたいと思います。