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');
};我编写了一个函数，将当前标题与返回索引的数组进行比较，因此我知道需要打开哪个模式内容。所以问题是modalContentsCollection[c].classList.toggle('show-toggle');不工作，但没有我的循环它是工作的。如果没有匹配的标题，我在结尾处将modalContentsCollection[0].classList.toggle('show-toggle');写为fall back。
我在这里张贴了图片：https://imgur.com/a/JxrT8eb所以当我点击“图像而Das Haus”显示时，模式应该显示"Das Haus“的内容，但如果我点击"Wintersport”，"Wintersport“的内容应该会显示等等。
回答 1
Stack Overflow用户
发布于 2019-12-24 00:42:59
好吧，我骑自行车去了，吃了点东西。所以我用新的头部重写了上面的函数
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上完成？
https://stackoverflow.com/questions/59456364
复制相似问题
腾讯云开发者
