单击以显示使用 Javascript 的 div

Question

有没有更有效的方法来创建这个 function 和 Javascript。

正如您在演示中看到的那样，第一个块可以正常工作，但第二个块不能。 我计划在数百个类别中推广它，所以想知道这里是否有更简洁的解决方案。

const btn = document.getElementById("category36SeeMore");
btn.addEventListener("click", function(e){
  e.preventDefault();
  const id = this.id.replace('SeeMore', '')
  document.querySelectorAll('.' + id).forEach(el=>el.style.display = 'block')
});

.category36 {
  margin: 5px;
  padding: .5rem;
  box-shadow: 2px 2px 5px rgba(0,0,0,0.03);
  border-radius: 4px;
  background: Skyblue;
  border-bottom: 1px solid #F9F2D6;
  border-right: 1px solid #F9F2D6;
}

<p>
<a href="#" id="category36SeeMore">See more</a>
</p>

<div class="category36">
test
</div>

<div class="category36" style="display:none;">
test
</div>

<div class="category36" style="display:none;">
test
</div>

<div class="category36" style="display:none;">
test
</div>


<hr>

<p>
<a href="#" id="category37SeeMore">See more</a>
</p>

<div class="category37">
test
</div>

<div class="category37" style="display:none;">
test
</div>

<div class="category37" style="display:none;">
test
</div>

<div class="category37" style="display:none;">
test
</div>

演示： https://jsfiddle.net/qzfesw5d/

jQuery 是更好的方法吗？ 我们已经在网站上使用了它。

Answer 1

您必须定位所有元素并遍历它们以附加事件。 您可以使用以选择器开头的属性或使用常见的class来定位元素：

 const btnList = document.querySelectorAll("a[id^=category"); btnList.forEach(function(btn){ btn.addEventListener("click", function(e){ e.preventDefault(); const id = this.id.replace('SeeMore', '') document.querySelectorAll('.' + id).forEach(el=>el.style.display = 'block') }); });

 .category36, .category37 { margin: 5px; padding: .5rem; box-shadow: 2px 2px 5px rgba(0,0,0,0.03); border-radius: 4px; background: Skyblue; border-bottom: 1px solid #F9F2D6; border-right: 1px solid #F9F2D6; }

 <p> <a href="#" id="category36SeeMore">See more</a> </p> <div class="category36"> test </div> <div class="category36" style="display:none;"> test </div> <div class="category36" style="display:none;"> test </div> <div class="category36" style="display:none;"> test </div> <hr> <p> <a href="#" id="category37SeeMore">See more</a> </p> <div class="category37"> test </div> <div class="category37" style="display:none;"> test </div> <div class="category37" style="display:none;"> test </div> <div class="category37" style="display:none;"> test </div>

Answer 2

如果您使用的是普通的 javascript （如您的示例），您可以应用以下逻辑：

• 将特定的 class 分配给您的所有容器，例如category-container
• 不是使用 ID 选择 ONE，而是使用类名 select 它们全部
• 循环它们以添加事件
• 确保该事件将改变当前父级的子级的显示

添加新类别不会破坏任何东西。 这应该是完全可扩展的。

Answer 3

使用 jQuery 可能会使事情变得简单一些。 这是一种使用普通 JavaScript 的方法。

const categoryCount = 36
for (let i = 0; i < categoryCount; i++) {
  const btn = document.getElementById(`category${i+1}SeeMore`)
  if (btn) {
    btn.addEventListener("click", e => {
      e.preventDefault();
      document.querySelectorAll(`.category${i+1}`)
        .forEach(el => el.style.display = 'block')
    })
  }
}

Answer 4

您可以将所有...SeeMore元素更改为 class ，然后将data-*属性添加到 all 以指向要显示的集合，例如：

<a href="#" class="SeeMore" data-id="36">See more</a>

然后遍历每个 class 并单击任何 seemore，您可以使用以下方法轻松获取 id：

const id = this.dataset.id

然后轻松显示 collections div，如：

document.querySelectorAll('.category' + id).forEach(el=>el.style.display = 'block')

 const btns = document.querySelectorAll(".SeeMore"); btns.forEach(function(btn) { btn.addEventListener("click", function(e) { e.preventDefault(); const id = this.dataset.id document.querySelectorAll('.category' + id).forEach(el => el.style.display = 'block') }); });

 .category36, .category37 { margin: 5px; padding: .5rem; box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.03); border-radius: 4px; background: Skyblue; border-bottom: 1px solid #F9F2D6; border-right: 1px solid #F9F2D6; }

 <p> <a href="#" class="SeeMore" data-id="36">See more</a> </p> <div class="category36"> test </div> <div class="category36" style="display:none;"> test </div> <div class="category36" style="display:none;"> test </div> <div class="category36" style="display:none;"> test </div> <hr> <p> <a href="#" class="SeeMore" data-id="37">See more</a> </p> <div class="category37"> test </div> <div class="category37" style="display:none;"> test </div> <div class="category37" style="display:none;"> test </div> <div class="category37" style="display:none;"> test </div>