时间戳

首页 > 解决方案 > 单击时仅切换循环中的一个元素

javascript - 单击时仅切换循环中的一个元素

问题描述

我在刀片文件中有一个 for each 循环来显示 items 。

当一个元素名称仅单击同一项目时，我想要的是切换但我的代码切换所有项目。

如何解决？

问题是我的 JavaScript 代码

var isHidden = true;

function loadToggleAction() {
  var sheet = document.createElement('style')
  if (!isHidden) {
    sheet.innerHTML = ".show {display:none;}";
  } else {
    sheet.innerHTML = ".show {display:block;}";
  }
  document.body.appendChild(sheet);
  isHidden = !isHidden;
}
<h2 class="lesson-h2" onclick="loadToggleAction()">
  lesson 1
</h2>

<a class="lesson-file" href="{{ " #play " }}">
  <img class="show-lesson" src="img.png" title="مشاهده آنلاین این درس" height="24" onclick="loadToggleAction()">

</a>

<div class="show">
  lesson 1 content


</div>


<h2 class="lesson-h2" onclick="loadToggleAction()">
  lesson 2
</h2>

<a class="lesson-file" href="{{ " #play " }}">
  <img class="show-lesson" src="img.png" title="مشاهده آنلاین این درس" height="24" onclick="loadToggleAction()">

</a>

<div class="show">
  lesson 2 content


</div>


<h2 class="lesson-h2" onclick="loadToggleAction()">
  lesson 3
</h2>

<a class="lesson-file" href="{{ " #play " }}">
  <img class="show-lesson" src="img.png" title="مشاهده آنلاین این درس" height="24" onclick="loadToggleAction()">

</a>

<div class="show">
  lesson 3 content


</div>

标签： javascripttoggle

解决方案

如果您想使用 CSS 执行此操作，则需要在迭代时为您的课程 h2 组件计算一个 id（您可以使用 for 循环中的索引来执行此操作。

完成此操作后，您可以直接在 loadToggleAction() 函数中更改 ID 上的显示样式（而不是像您实际所做的那样在类上）。

推荐阅读