试图循环通过单击事件，并使div与它的文本可见。有人犯了什么错误吗？

Question

以下是html容器：

      <div class="arrow-1">
        <div class="text-event">
          <p class="text-style-11">Text 1
          </p>
        </div>
        <div class="arrow">
          <div class="diamond">
          </div>
        </div>
      </div>

      <div class="arrow-2">
        <div class="text-event">
          <p class="text-style-11">Text 2
          </p>
        </div>
        <div class="arrow">
          <div class="diamond">
          </div>
        </div>
      </div>

      <div class="arrow-3">
        <div class="text-event">
          <p class="text-style-11">Text 3
          </p>
        </div>
        <div class="arrow">
          <div class="diamond">
          </div>
        </div>
      </div>

      <div class="arrow-4">
        <div class="text-event">
          <p class="text-style-11"> Text 4
          </p>
        </div>
        <div class="arrow">
          <div class="diamond">
          </div>
        </div>
      </div>

      <div class="arrow-5">
        <div class="text-event">
          <p class="text-style-11"> Text 5
          </p>
        </div>
        <div class="arrow">
          <div class="diamond">
          </div>
        </div>
      </div>

    </div>

当文本事件类单击时，段落应该是“可见的”。默认情况下，文本样式类是“隐藏的”。我已经和其他的div盒一起做过了，而且起作用了。循环函数中缺少“p”声明吗？当我将textEvent变量传递给控制台时，甚至没有控制台反馈。

const textEvent = document.querySelectorAll('.text-event');

for (var j = 0; j < textEvent.length; j++) (function (j) {
    textEvent[j].addEventListener('click', onclick);

    textEvent[j].onclick = function (ctrls) {
        ctrls.forEach(ctrl => {
            /* ctrl.getElementsByClassName('p')[0].innerHTML; */
            ctrl.document.getElementsByClassName('text-style-11').style.visibility = "visible";
        })
    }

})(j); 

Answer 1

我已经测试了这段代码--它应该工作得很好：

const textEvent = document.querySelectorAll('.text-event');
   
  for (var j = 0; j < textEvent.length; j++)  {
    
            textEvent[j].addEventListener('click', (el) => {
                const clickedElement = el.currentTarget;    
                const innerParagraph = clickedElement.querySelector('.text-style-11');    
                innerParagraph.style.visibility = 'visible';
            });
  }

Answer 2

我不能很好地理解你的代码，但我会这样做。

首先在数组上获取类"text-event"

• loop的所有元素，并向每个元素添加一个事件侦听器。当您单击其中一个元素时，在其中一个元素中选择带有text-style-11

• To类的元素。

。

const textContainers = document.querySelectorAll(".text-event");

textContainers.forEach((element) => {
    element.addEventListener("click", () => {
        const textElement = element.querySelector(".text-style-11");
        textElement.style.visibility = "hidden";
    });
});

我建议您创建一个类并使用classList切换来添加和删除该类，而不是直接添加样式。

    textContainers.forEach((element) => {
    element.addEventListener("click", () => {
        const textElement = element.querySelector(".text-style-11");
        textElement.classList.toggle("show");
    });
});

Answer 3

你已经得到了一个有效的答案。顺便说一句，下面是使用适当策略将事件侦听器添加到所有..text event元素的活动片段，这些元素将隐藏嵌入在单击框中的内部段落：

​

document.querySelectorAll('.text-event').forEach((el) => {
  el.addEventListener('click', (event) => {
    const clickedElement = event.currentTarget;    
    const innerParagraph = clickedElement.querySelector('.text-style-11');    
    innerParagraph.style.visibility = 'visible';
  });
});

.text-event {
  border: dotted gray 3px;
  margin-bottom: 2px;
  cursor: pointer;
}

.text-style-11{
  visibility: hidden;
}

<div class="arrow-1">
  <div class="text-event">
    <p class="text-style-11">Alle Personen, die nicht sozialversicherungspflichtig beschäftigt sind (Beamte, Selbstständige, etc.)
    </p>
  </div>
  <div class="arrow">
    <div class="diamond">
    </div>
  </div>
</div>

<div class="arrow-2">
  <div class="text-event">
    <p class="text-style-11">Einmalige Wartezeit 1 Monate
    </p>
  </div>
  <div class="arrow">
    <div class="diamond">
    </div>
  </div>
</div>

<div class="arrow-3">
  <div class="text-event">
    <p class="text-style-11">Keine Karenzzeit
    </p>
  </div>
  <div class="arrow">
    <div class="diamond">
    </div>
  </div>
</div>

<div class="arrow-4">
  <div class="text-event">
    <p class="text-style-11">Versichert sind nur Erstdiagnosen während der Versicherungslaufzeit (Herzinfarkt, Schlaganfall, Krebs, Blindheit oder Taubheit)
    </p>
  </div>
  <div class="arrow">
    <div class="diamond">
    </div>
  </div>
</div>

<div class="arrow-5">
  <div class="text-event">
    <p class="text-style-11">Übernahme des noch ausstehenden Restsaldos von bis zu 135.000 €
    </p>
  </div>
  <div class="arrow">
    <div class="diamond">
    </div>
  </div>
</div>

​