clickでtextを交互に表示させたい

Question

前提

クリックすると英語と日本語が交互に表示させるようにしたいです。

実現したいこと

toggle buttonを使って違う要素のテキストを変換させたいです。

発生している問題・エラーメッセージ

一回クリックすると日本語に変わりその後はクリックしても日本語のままです。

該当のソースコード

          <div class="subtitle-parent col-sm-12 col-md-12 ">
            <div class="subtitle">
              <div class="english">
                <p>This is English</p>
              </div>
            </div>
            <div class="side-gadget">
              <!-- TOGGLE BUTTON -->
              <div class="toggle-switch">
                <input type="checkbox" id="toggle" class="toggle-input">
                <label for="toggle" class="toggle-label"></label>
              </div>

              <div class="gear">
                <i class="fa-solid fa-gear"></i>

              </div>
            </div>
          </div>

/* 下 */
.subtitle-parent {
    background-color: #fff;
    display: flex;
    justify-content: space-between;
}













/* TOGGLE BUTTON */

/* ① ボタンの背景は Ckeckboxの<label> */
.toggle-label {
    width: 60px;
    height: 30px;
    background: #ccc;
    position: relative;
    display: inline-flex;
    border-radius: 46px;
    transition: 0.4s;
    box-sizing: border-box;
}

input[type='checkbox']:checked+label {
    background-color: #4BD865;
}

/* ②Toggle Switch の左右に動く 「 ○ 」 */
.toggle-label::after {

    /* // ○ のスタイル */
    content: '';
    position: absolute;
    width: 30px;
    height: 30px;
    border-radius: 100%;
    left: 0;
    top: 0;
    z-index: 2;
    background: #fff;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
    transition: 0.4s;
    cursor: pointer;
}

input[type='checkbox']:checked+label:after {
    left: 30px;
}

input {
    display: none;
}

// TOGGLE BUTTON

$('#toggle').click(function() {

if($('.english').text = 'This is English') {
  $('.english').text('この文は日本語です');

} else {
  $('.english').text('This is English');

}
 
});

試したこと

こちら　https://www.tutorialrepublic.com/codelab.php?topic=faq&file=jquery-changing-text-inside-a-button-or-link-when-toggle
の記事を参考に

  var text = $('.english').text();

を使ってみたりしましたが、これは意味なかったです...

int32_t様の解説が理解できているか不安です

$('.english').text('〜') だと赤丸２つも含まれてしまうということでしょうか？

Comments

[m.ts10806]

if($('.english').text = 'This is English') {
は全く意味不明の実装なので論外として（プロパティとメソッド、代入と演算子の違いが理解できてない）

>を使ってみたりしましたが、これは意味なかったです...
その後どう使ったのでしょうか。
代入しただけでは何も起きないのは当然と思うのですが。
質問編集してください。

[m.ts10806]

$('.english').text()　←これで何が取得できたかデバッグで確認してみましたか？
デバッグで確認することを覚えれば質問する前に解決できることも増えてくると思うのですが。

[Iori]

コメントありがとうございます。
デバッグで「この文は日本語です」と出ました。大変恥ずかしながら、デバッグで確認する考え方を心得ていませんでした。本当に基礎ができていないのでご教示ありがとうございます。

Answer 1

あらかじめ文書はHTMLに埋め込んでおいてcssで切り替えればよいのでは？

<style>
#toggle:checked ~ * .english{
display:none;
}
#toggle:not(:checked) ~ * .japanese{
display:none;
}
</style>

<input type="checkbox" id="toggle" class="toggle-input">
<div class="subtitle-parent col-sm-12 col-md-12 ">
<div class="subtitle">
<div class="english">
<p>This is English</p>
</div>
<div class="japanese">
<p>この文は日本語です</p>
</div>
</div>
</div>

Answer 2

if($('.english').text = 'This is English') {

text プロパティに代入してしまっていますが、text 関数の呼び出し結果との比較をしたいはずです。

if ($('.english').text() == 'This is English') {

実際は改行や空白が入っていて比較もうまくいかないと思います。対象を $('.english p') にしたほうが良いでしょう。

Comments

[Iori]

ありがとうございます。ご指示いただいたとおりに変えましたらきれいに作動しました。p を加えないとテキストであることを特定できず、認識されないという考えで合っていますでしょうか？

[int32_t]

> テキストであることを特定できず

いいえ。回答に書いたとおり、$('.english').text() では前後に空白が入って 'This is English' にはならないということです。あと、$('.english').text('〜') をすると <p> が消えてしまうので、それも意図通りではないだろうと思います。

[Iori]

解説ありがとうございます。質問の部分で確認させていただきたいことがあるので確認していただいても大丈夫でしょうか？