ホーム>source

ダークモードスイッチを備えたアプリを作成しています。最初のクリックで機能しますが、その後はすべての二番目 クリック。

(このスニペットはチェックボックスを示しています。プロジェクトでは、実際のスイッチのように見えます)

ワンクリックで機能させるにはどうすればよいですか?

ウィズウィズ
ウィズウィズ
ウィズウィズ

const body = document.getElementById('body'); let currentBodyClass = body.className; const darkModeSwitch = document.getElementById('darkModeSwitch'); //Dark Mode function darkMode() { darkModeSwitch.addEventListener('click', () => { if (currentBodyClass === "lightMode") { body.className = currentBodyClass = "darkMode"; } else if (currentBodyClass === "darkMode") { body.className = currentBodyClass = "lightMode"; } }); }
あなたの答え
  • 解決した方法 # 1

    チェックボックスをクリックするたびに、別のeventListenerが darkModeSwitch に追加されます  -あなたのウィズウィズを取る  関数の外に addEventListener を削除します

    次に、 onclick を移動する必要があります   let currentBodyClass = body.className; 内  関数。値が毎回更新されるようにします。それを関数の外に持って、あなたはそれに値を割り当てていますかつて 実行時、そしてそれを決して更新しない

    最後に、これは限られた意味があります

    ウィズウィズ
    

    代わりに、ただ

    ウィズウィズ
    

    ウィズウィズ
    
    ウィズウィズ
    
    ウィズウィズ
    


    最後に、 darkModeSwitch の使用を検討してください。  Elementのクラスを操作するとき。これにより、 body.className = currentBodyClass = "darkMode"; などのメソッドを利用できるようになります。  / body.className = "darkMode";  / const darkModeSwitch = document.getElementById('darkModeSwitch'); const body = document.getElementById('body'); //Dark Mode darkModeSwitch.addEventListener('click', () => { let currentBodyClass = body.className; if (body.className === "lightMode") { body.className = "darkMode"; } else if (currentBodyClass === "darkMode") { body.className = "lightMode"; } });  -Elementに一度に複数のクラスが設定されている場合、現在のメソッドは失敗しますが、これらのメソッドはこれを回避します

    ウィズウィズ
    

  • 解決した方法 # 2

    チェックボックスのクリックイベントごとに、 #darkModeSwitch { position: absolute; left: 15px; top: 15px; } .darkMode { background-color: black; transition: ease .3s; } .lightMode { background-color: #FFF; transition: ease .3s; } #darkModeSwitch input[type="checkbox"] { width: 40px; height: 20px; background: #fff89d; } #darkModeSwitch input:checked[type="checkbox"] { background: #757575; } #darkModeSwitch input[type="checkbox"]:before { width: 20px; height: 20px; background: #fff; } #darkModeSwitch input:checked[type="checkbox"]:before { background: #000; } に新しいイベントリスナーを設定します  削除可能な要素

    ウィズウィズ
    
    ウィズウィズ
    
    ウィズウィズ
    

  • 解決した方法 # 3

    これは入力タイプを使用して確認する方が簡単です

    <前>ウィズウィズ

  • 解決した方法 # 4

    回答前:

    <前>ウィズウィズ

    あなたは関数 <body id="body" class="lightMode"> <div id="darkModeSwitch"> <input type="checkbox" title="Toggle Light/Dark Mode" /> </div> </body> を呼び出します  すべてのクリックで、そしてより

    <前>ウィズウィズ

    その結果、チェックボックスをクリックするのと同じ数のリスナーができます。

    2つのオプションからoenが必要です。

    ウィズウィズ  htmlで .classList を削除 または

    .add() を削除する  そして .remove()  関数と .contains() を維持  -これはリスナーを追加し、すべてのクリックを処理します

    答えに戻ると、多くの実用的な答えがあります。最適化について少しアドバイスしたいだけです

    簡略化されたデモ:

    ウィズウィズ
    
    ウィズウィズ
    
    ウィズウィズ
    

  • 解決した方法 # 5

    ボタンをクリックするたびに、新しいイベントリスナーをスイッチに追加します。したがって、ボタンを2回クリックするたびに、ダークモードは偶数回トグルし、変化はありませんでした。

    これを確認する簡単な方法は、ログを

    <前>ウィズウィズ

    解決策は、他の回答が示唆するように、メソッド内のaddEventListener呼び出しを削除することです。

    let currentBodyClass = body.classList; if (currentBodyClass.contains("lightMode")) { currentBodyClass.add('darkMode'); currentBodyClass.remove('lightMode'); } else if (currentBodyClass.contains("darkMode")) { currentBodyClass.add('lightMode'); currentBodyClass.remove('darkMode'); }

  • 前へ java - JPAクエリ:サブクエリをグループ化条件に結合する
  • 次へ node.js - dialogflow fullfilmentおよびfirebaseの応答時間