Как создать функцию, которая меняет div с разными идентификаторами?

Question

Я пытаюсь создать функцию в js для обмена содержимым веб-страницы, используя .style.display = "none" или "block", но основная проблема заключается в том, что для этого есть несколько разных div с разными идентификаторами.Основной целью этого является изменение содержимого после нажатия определенных кнопок без загрузки новой страницы.Самой большой проблемой для меня является создание скрипта, который будет менять «id» независимо от того, какой id был раньше.Обычно я могу написать все идентификаторы один за другим и просто поменять их местами, но это не так.Контент должен изменяться автоматически, поэтому независимо от того, какой идентификатор был до того, как он заменит конкретный после нажатия кнопки.

Я пробовал с querySelector во многих отношениях, изменив id на class, используяудалить / установить атрибут, но ни один из этих методов не работает для меня.Я пытаюсь написать эту функцию в течение 2 недель, и у меня нет никаких идей.

Я беспокоюсь, что классы начальной загрузки могут вызвать проблемы с этим ...

Может кто-нибудь помочь мне сэтот?Любые советы?

Это мой первый пост здесь, так что если я сделал что-то не так, извините за это.

Я не могу вставить сюда свой код, так как все находится на ноутбуке моей компании, который я оставил, когда язакончил свою работу.

Answer 1

Вот агностический подход без использования HTML id s или class es.

const container = document.querySelector('.container');
const buttons = container.querySelectorAll('button');
const divs = container.querySelectorAll(':scope > div');

function handleButtonClick() {
  this.previousElementSibling.classList.toggle('hide');
}

buttons.forEach(button => {
  button.addEventListener('click', handleButtonClick);
});

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 20px;
}

.hide {
  display: none;
}

<div class="container">
  <div>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis sed, dicta quasi in blanditiis nam atque odio, nobis a. Eos incidunt debitis tenetur rerum, esse ratione quisquam possimus quasi nam.</p>
    <button>Toggle Content</button>    
  </div>

  <div>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis sed, dicta quasi in blanditiis nam atque odio, nobis a. Eos incidunt debitis tenetur rerum, esse ratione quisquam possimus quasi nam.</p>
    <button>Toggle Content</button>    
  </div>
  
  <div>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis sed, dicta quasi in blanditiis nam atque odio, nobis a. Eos incidunt debitis tenetur rerum, esse ratione quisquam possimus quasi nam.</p>
    <button>Toggle Content</button>    
  </div>
  
  <div>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis sed, dicta quasi in blanditiis nam atque odio, nobis a. Eos incidunt debitis tenetur rerum, esse ratione quisquam possimus quasi nam.</p>
    <button>Toggle Content</button>    
  </div>
  
  <div>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis sed, dicta quasi in blanditiis nam atque odio, nobis a. Eos incidunt debitis tenetur rerum, esse ratione quisquam possimus quasi nam.</p>
    <button>Toggle Content</button>    
  </div>  
</div>

jsFiddle