使用JavaScript的基本模式

我正在写一个基本模式，它将打开并显示内容。我现在将尽我所能描述它的外观，因为我无法添加图像

所以我有一个图像滑块，其中标题根据当前显示的img而变化。单击当前图像时，将打开一个模式

模态在左侧有一个ul，其中有img滑块的所有标题，因此用户可以在模态中更改模态的内容

我现在想要的是，当用户单击幻灯片中的一个图像时，匹配的内容正在打开，而不仅仅是模式内容列表的第一个。（模态内容存储在集合中）

我想读这篇文章会很困惑，所以如果有人知道我可以在哪里发布截图，我会这么做

所以我的问题是：

const displayContent = () => {
  headingString = currentHeading.textContent.toUpperCase();
  modalContentsCollection = modals[index].childNodes[1].children;
  choices = modalContentsCollection[0].querySelectorAll('li a');
  let compareArray = [];
  choices.forEach(element => {
    compareArray.push(element.textContent.toUpperCase().trim());
  });
  let b = false;
  console.log(compareArray);
  console.log(headingString);
  let c = 0
  while (!b && c < compareArray.length)  {
    console.log(compareArray[c]);
    console.log(c);
    if (headingString == compareArray[c]) {
      console.log(modalContentsCollection[c]);
      console.log(c);    
      modalContentsCollection[c].classList.toggle('show-toggle');
      console.log(modalContentsCollection[c]);
      b = true;
    c++;
  }
  modalContentsCollection[0].classList.toggle('show-toggle');
};

const displayContent=（）=>{
headingString=currentHeading.textContent.toUpperCase（）；
ModalContentCollection=modals[index]。子节点[1]。子节点；
choices=ModalContentCollection[0]。querySelectorAll（'LIA'）；
让compararray=[]；
choices.forEach（元素=>{
comparararay.push（element.textContent.toUpperCase（）.trim（））；
});
设b=false；
控制台日志（comparararray）；
控制台日志（头串）；
设c=0
而（！b&&c

我编写了一个函数，将当前标题与返回索引的数组进行比较，这样我就知道需要打开哪个模式内容。所以问题是

modalContentCollection[c]。classList.toggle（'show-toggle'）；

不起作用，但没有我的循环。我在末尾编写了

modalContentCollection[0].classList.toggle（'show-toggle'）；

如果没有匹配的标题，则作为回退

我把照片贴在这里：

---

因此，当我点击显示“Das Haus时的图像”时，模态应显示“Das Haus”的内容，但如果我点击“Wintersport”，则应显示“Wintersport”的内容，等等。

好的，我骑自行车去吃东西了。因此，我用fresh head将上述函数改写为

const displayContent = () => {
  console.log('displayContent');
  let headingString = currentHeading.textContent.toUpperCase();
  let modalContentsCollection = modals[index].childNodes[1].children;
  let choices = modalContentsCollection[0].querySelectorAll('li a');
  let compareArray = [];
  choices.forEach(element => {
    compareArray.push(element.textContent.toUpperCase().trim());
  });
  let i = 0;
  let bool = false;
  compareArray.forEach(element => {
    if (element === headingString) {
      modalContentsCollection[i].classList.toggle('show-toggle');
      bool = true;
      return;
    }
    i++;
  });
  if (!bool) {
    modalContentsCollection[0].classList.toggle('show-toggle');
  }
};

也许有人能告诉我为什么这个能起作用，但上面的就不行了

---

无论如何，感谢所有有兴趣提供帮助的人。在本项目结束时，我将发布源代码以供审阅和提示，这样我就可以学习了。我想这应该在exchangeoverflow上完成？

您可以将图像上传到第三方网站并共享链接。代码会出错吗？@Akshithdayan不，很抱歉不要抛出任何错误。@AdityaPrakash我会看一看。感谢您指出我添加的图像。如果您想查看自己编写的工作代码，请查看的帮助中心，查看您的问题是否与主题相关。