(jQuery или JS) Показать, когда дисплей = нет

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

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> 

Answer 2

Проблема с вашим кодом заключается в том, что между вашими элементами <button> и элементом <p> нет никакой связи, на которую они должны быть нацелены. Все, что вам нужно, это передать идентификатор в качестве аргумента 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>