如何在僅使用 javascript（無庫）單擊所述元素時將 html 元素 class 或 id 存儲在變量中？

Question

我有三段文字：我有/一只白色/狗。

單擊每個塊后，單詞將作為音頻播放。

我還想切換每個塊的 class 以便在我單擊塊時應用過渡。

編輯：問題是我單擊的 html 元素不會切換其 class。 什么都沒有發生。 沒有錯誤。 沒有什么。

<body>
  <div class="chunks">
    <div onclick="play1()" class="chunk1"> 
      <span>I have</span>
    </div>
    <div onclick="play2()" class="chunk2">
      <span>a white</span>
    </div>
    <div onclick="play3()" class="chunk3">
      <span>dog.</span>
    </div>
  </div>

  <audio id="audio1" src="sounds/I have.wav"></audio>
  <audio id="audio2" src="sounds/a_white.wav"></audio>
  <audio id="audio3" src="sounds/dog.wav"></audio>

<script>
function play1() {
      document.getElementById('audio1').play();

// The function below is what I've tried to toggle the class of the element I click on

      addEventListener('click', function(e) {
        const box = document.querySelector(e.target);
        box.classList.add('playing'); // playing is the class that will add the transition
      })

    }
</script>

Answer 1

我認為只需更改父級的 class 然后使用它將一些 styles 應用於樣式表上的相應子級會更容易。 然后，您只需要在音頻停止播放時刪除 class 名稱（通過將其設置為 ''）。

這是我的做法：

<body>
  <div id="chunks">
    <div data-audio="audio1" class="chunk1">I have</div>
    <div data-audio="audio2" class="chunk2">a white</div>
    <div data-audio="audio3" class="chunk3">dog.</div>
  </div>
  <audio id="audio1" src="sounds/I have.wav"></audio>
  <audio id="audio2" src="sounds/a_white.wav"></audio>
  <audio id="audio3" src="sounds/dog.wav"></audio>

  <script>
    const container = document.getElementById('chunks');

    document.querySelectorAll('#chunks div').forEach(el => {
      el.addEventListener('click', (e) => {
          const clickedElement = e.target;
          const clickedElementClass = clickedElement.className;
          const relatedAudio = clickedElement.dataset.audio;
          container.className = clickedElementClass;
          document.getElementById(relatedAudio).play();
        })
    });
  </script>

  <style>
    .chunk1 .chunk1,
    .chunk2 .chunk2,
    .chunk3 .chunk3 { background: red; }
  </style>
</body>

如何在僅使用 javascript（無庫）單擊所述元素時將 html 元素 class 或 id 存儲在變量中？

問題描述

1 個解決方案

解決方案1
0 2019-09-24 16:29:47

如何在僅使用 javascript（無庫）單擊所述元素時將 html 元素 class 或 id 存儲在變量中？

問題描述

1 個解決方案

解決方案1 0 2019-09-24 16:29:47

解決方案1
0 2019-09-24 16:29:47