切换按钮不仅适用于中心元素！ (HTML / Javascript)

问题描述 投票：0回答：2

所以我有三个条目，都以相同的方式填充。顶级作品。底部工作。而中间没有。如果只有 1 个工作或没有工作，我可能会有一些想法，但只有中间失败，我挠头。 Edge 和 Firefox 中的行为相同。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Lesson Prompts</title>
  </head>
  <body>
    <h1>Lesson Prompts</h1>
    <div id="prompts"></div>
      <script id="lessondata" type="application/json">
{
  "prompts": [
    {
      "audio": "prompt1.mp3",
      "spanish": "Hola, ¿cómo estás?",
      "english": "Hello, how are you?"
    },
    {
      "audio": "prompt3.mp3",
      "spanish": "¿Qué hora es?",
      "english": "What time is it?"
    },
    {
      "audio": "prompt2.mp3",
      "spanish": "Me llamo Juan.",
      "english": "My name is Juan."
    }
  ]
}

</script> 
    <script>
    var data = JSON.parse(document.getElementById('lessondata').textContent);
          const promptsEl = document.getElementById('prompts');
          data.prompts.forEach(prompt => {
            const promptEl = document.createElement('div');
            promptEl.classList.add('prompt');
            promptEl.innerHTML = `
              <button class="toggle-btn">Show/Hide</button>
              <audio src="${prompt.audio}" controls></audio>
              <p class="spanish">${prompt.spanish}</p>
              <div class="english hidden">${prompt.english}</div>
            `;
            promptsEl.appendChild(promptEl);

          const toggleBtns = document.querySelectorAll('.toggle-btn');
          toggleBtns.forEach(btn => {
            btn.addEventListener('click', () => {
              const promptEl = btn.parentElement;
              const englishEl = promptEl.querySelector('.english');
              englishEl.classList.toggle('hidden');
            });
          });
        });
    </script>

    <style>
      .hidden {
        display: none;
      }
    </style>
  </body>
</html>
javascript html
2个回答
0
投票

你应该把事件附加代码块放在第一个

forEach
循环的外面。

演示：

var data = JSON.parse(document.getElementById('lessondata').textContent);
const promptsEl = document.getElementById('prompts');
data.prompts.forEach(prompt => {
  const promptEl = document.createElement('div');
  promptEl.classList.add('prompt');
  promptEl.innerHTML = `
    <button class="toggle-btn">Show/Hide</button>
    <audio src="${prompt.audio}" controls></audio>
    <p class="spanish">${prompt.spanish}</p>
    <div class="english hidden">${prompt.english}</div>
  `;
  promptsEl.appendChild(promptEl);
  
  //remove from here
});

//place here
const toggleBtns = document.querySelectorAll('.toggle-btn');
toggleBtns.forEach(btn => {
  btn.addEventListener('click', (e) => {
    const promptEl = btn.parentElement;
    const englishEl = promptEl.querySelector('.english');
    englishEl.classList.toggle('hidden');
  });
});
.hidden {
  display: none;
}
    <h1>Lesson Prompts</h1>
    <div id="prompts"></div>
      <script id="lessondata" type="application/json">
{
  "prompts": [
    {
      "audio": "prompt1.mp3",
      "spanish": "Hola, ¿cómo estás?",
      "english": "Hello, how are you?"
    },
    {
      "audio": "prompt3.mp3",
      "spanish": "¿Qué hora es?",
      "english": "What time is it?"
    },
    {
      "audio": "prompt2.mp3",
      "spanish": "Me llamo Juan.",
      "english": "My name is Juan."
    }
  ]
}
</script>

0
投票

将

addEventListener
移出第一个
forEach

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Lesson Prompts</title>
  </head>
  <body>
    <h1>Lesson Prompts</h1>
    <div id="prompts"></div>
    <script id="lessondata" type="application/json">
      {
        "prompts": [
          {
            "audio": "prompt1.mp3",
            "spanish": "Hola, ¿cómo estás?",
            "english": "Hello, how are you?"
          },
          {
            "audio": "prompt3.mp3",
            "spanish": "¿Qué hora es?",
            "english": "What time is it?"
          },
          {
            "audio": "prompt2.mp3",
            "spanish": "Me llamo Juan.",
            "english": "My name is Juan."
          }
        ]
      }
    </script>
    <script>
      var data = JSON.parse(document.getElementById('lessondata').textContent);
      const promptsEl = document.getElementById('prompts');
      data.prompts.forEach((prompt) => {
        const promptEl = document.createElement('div');
        promptEl.classList.add('prompt');
        promptEl.innerHTML = `
              <button class="toggle-btn">Show/Hide</button>
              <audio src="${prompt.audio}" controls></audio>
              <p class="spanish">${prompt.spanish}</p>
              <div class="english hidden">${prompt.english}</div>
            `;
        promptsEl.appendChild(promptEl);
      });

      const toggleBtns = document.querySelectorAll('.toggle-btn');
      console.log(toggleBtns.length);
      toggleBtns.forEach((btn) => {
        btn.addEventListener('click', function () {
          const promptEl = btn.parentElement;
          const englishEl = promptEl.querySelector('.english');
          console.log(englishEl);
          englishEl.classList.toggle('hidden');
        });
      });
    </script>

    <style>
      .hidden {
        display: none;
      }
    </style>
  </body>
</html>

var data = JSON.parse(document.getElementById('lessondata').textContent);
const promptsEl = document.getElementById('prompts');
data.prompts.forEach(prompt => {
  const promptEl = document.createElement('div');
  promptEl.classList.add('prompt');
  promptEl.innerHTML = `
    <button class="toggle-btn">Show/Hide</button>
    <audio src="${prompt.audio}" controls></audio>
    <p class="spanish">${prompt.spanish}</p>
    <div class="english hidden">${prompt.english}</div>
  `;
  promptsEl.appendChild(promptEl);
  
  //remove from here
});

//place here
const toggleBtns = document.querySelectorAll('.toggle-btn');
toggleBtns.forEach(btn => {
  btn.addEventListener('click', (e) => {
    const promptEl = btn.parentElement;
    const englishEl = promptEl.querySelector('.english');
    englishEl.classList.toggle('hidden');
  });
});
.hidden {
  display: none;
}
    <h1>Lesson Prompts</h1>
    <div id="prompts"></div>
      <script id="lessondata" type="application/json">
{
  "prompts": [
    {
      "audio": "prompt1.mp3",
      "spanish": "Hola, ¿cómo estás?",
      "english": "Hello, how are you?"
    },
    {
      "audio": "prompt3.mp3",
      "spanish": "¿Qué hora es?",
      "english": "What time is it?"
    },
    {
      "audio": "prompt2.mp3",
      "spanish": "Me llamo Juan.",
      "english": "My name is Juan."
    }
  ]
}
</script>

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.