试图循环点击事件并使带有文本的 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>

当文本事件 class 单击时，段落应该是“可见的”。 文本样式 class 默认为“隐藏”。 我已经用其他 div 框做到了这一点，并且它有效。 循环 function 中是否缺少“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

我不能很好地理解您的代码，但这就是我的做法。

1. 首先使用 class "text-event" 获取所有元素
2. 循环遍历该数组并为每个数组添加一个事件侦听器。
3. 当您单击其中一个 select 时，该元素具有 text-style-11 的 class
4. 到那个元素的东西。

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

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

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

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

Answer 2

我已经测试了这段代码，它应该可以正常工作：

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 3

你已经得到了一个有效的答案..顺便说一下，这里的实时片段使用正确的策略向所有 your.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>