如何为 JavaScript 的课程创建课程表？

Question

我想通过 Java 类似于 Udemy 上的脚本来创建课程演示。

我尝试将按钮和内容放在同一个 div 中并添加一个事件侦听器，该侦听器将在单击时触发条件检查两个元素是否属于同一父元素以及是否为 true 以显示内容。

但是不行。

代码应该是这样的，但有更多的按钮。

   let batonceros  = document.getElementsByClassName("batno");

   let paragraph = document.getElementsByClassName("para");



   batonceros.addEventListener("click", function() {

   if( batonceros != paragraph && batonceros.parentNode == paragraph.parentNode) {
    
    batonceros.style.display = "block";
}

else {
    batonceros.style.display = "none";
    
  }
 });

Answer 1

要调试，请尝试在不检查父级的情况下查看它是否工作。此外，无需检查按钮是否等于段落。另外，您更改的是按钮样式，而不是段落样式。

batonceros.addEventListener("click", function() {  
    paragraph.style.display = "block";
}

如果这确实导致段落显示，您的问题可能出在元素结构上。

Answer 2

不太确定您要完成什么，但这也许会有所帮助。它显示了如何引用父容器以从其 .batno

中找到相对 .para

let batonceros = document.querySelectorAll(".batno");
let paragraph = document.querySelectorAll(".para");

batonceros.forEach(button => button.addEventListener("click", e => {
  e.target.closest('div').querySelector('.para').classList.toggle('show');
}));

.para {
  display: none;
}

.show {
  display: block;
}

<div>
  <p class='para'>This is a paragraph</p>
  <button class='batno'>Button</button>
</div>

<div>
  <p class='para'>This is a paragraph</p>
  <button class='batno'>Button</button>
</div>

如何为 JavaScript 的课程创建课程表？

How to create curriculum presentation for a course with JavaScript?

javascript

siblings

conditional-statements