如何在仅使用 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