javascript - 如何创建交换具有不同 ID 的 div 的函数？

Question

我正在尝试在 js 中创建函数以使用 .style.display = "none"或 "block"交换网页内容，但主要问题是几乎没有具有不同 id 的不同 div。这样做的主要目的是在不加载新页面的情况下单击特定按钮后更改内容。对我来说最大的问题是创建将更改“id”的脚本独立于之前的 id 。通常我可以一个一个地写下所有的 id，然后交换它们，但事实并非如此。内容应该自动更改，因此无论之前的 ID 是什么，它都会在按下按钮后替换为特定的 ID。

我已经通过使用 remove/set Attribute 将 id 更改为 class 以多种方式尝试使用 querySelector 但这些方法都不起作用为我。我花了 2 周时间尝试编写此功能，但我没有任何想法。

我担心引导类可能会导致问题...

有人可以帮我解决这个问题吗？有什么建议吗？

这是我在这里的第一篇文章，所以如果我做错了什么，请原谅。

我无法在此处粘贴我的代码，因为所有内容都在我完成工作后离开的公司笔记本电脑上。

Answer 1

这是一种不使用 HTML id 或 classes 的不可知方法。

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