Question

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

我通过多种方式尝试了querySelector，方法是使用{/ {1}}将id更改为class，使用remove / set Attribute，但是这些方法都不适合我。我试图将此功能编写2周，但我没有任何想法。

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

有人可以帮我吗？有提示吗？

这是我在这里的第一篇文章，因此，如果我做错了什么，对此表示歉意。

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

Answer 1

这是一种不使用HTML id或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

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

1 个答案: