單擊以顯示使用 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>