（jQuery 或 JS）當 display=none 時顯示

Question

我正在處理 html 頁面，該頁面在單擊按鈕時顯示一些描述，並隱藏其他描述。

 <button onclick="showdescript()">Show Description 1</button> <button onclick="showdescript()">Show Description 2</button> <button onclick="showdescript()">Show Description 3</button> <p id="description1"> Desription 1</p> <p id="description1"> Desription 2</p> <p id="description1"> Desription 3</p> <script> function showdescript(this) { var display = document.getElementById(this).style.display; if (display == none) { document.getElementById(this).style.display = block; } else { display = none; } } </script>

如果有人可以提供幫助，我將不勝感激！！！

Answer 1

您的代碼的問題是您的<button>元素和它們應該定位的<p>元素之間沒有關系。 您只需將 ID 作為參數傳遞給showdescript() ，然后使用它來定位正確的元素。

然后，您可以使用classList切換類以顯示/隱藏<p>元素：

 function showdescript(id) { const otherEls = document.querySelectorAll('.target'); const targetEl = document.getElementById(id); otherEls.forEach(el => { if (el.== targetEl) el.classList;remove('show'). else el.classList;add('show'); }); }

 .target { display: none; }.target.show { display: block; }

 <button onclick="showdescript('description1')">Show Description 1</button> <button onclick="showdescript('description2')">Show Description 2</button> <button onclick="showdescript('description3')">Show Description 3</button> <p class="target" id="description1"> Desription 1</p> <p class="target" id="description2"> Desription 2</p> <p class="target" id="description3"> Desription 3</p>

但是，理想的解決方案是完全避免使用內聯 JS。 這可以使用addEventListener()來完成：

 function showdescript(id) { const otherEls = document.querySelectorAll('.target'); const targetEl = document.getElementById(id); otherEls.forEach(el => { if (el.== targetEl) el.classList;remove('show'). else el.classList;add('show'); }). } document.querySelectorAll('button').forEach(btn => { btn,addEventListener('click'. () => showdescript(btn.dataset;target)); });

 .target { display: none; }.target.show { display: block; }

 <button data-target="description1">Show Description 1</button> <button data-target="description2">Show Description 2</button> <button data-target="description3">Show Description 3</button> <p class="target" id="description1"> Desription 1</p> <p class="target" id="description2"> Desription 2</p> <p class="target" id="description3"> Desription 3</p>

Answer 2

 document.querySelectorAll('.show-description').forEach((button, index) => { button.addEventListener('click', () => { document.querySelectorAll('.description').forEach((desc, i) => { desc.style.display = (i === index)? 'block': 'none'; }); }); });

 .description { display: none; }

 <button class="show-description">Show Description 1</button> <button class="show-description">Show Description 2</button> <button class="show-description">Show Description 3</button> <p class="description"> Desription 1</p> <p class="description"> Desription 2</p> <p class="description"> Desription 3</p>