Javascript 检查两个数据属性是否匹配，然后将类添加到元素中

我试图创建一个场景，当用户将鼠标悬停在缩略图上时，它会找到缩略图的“数据位置”属性，并将其与具有相同数据位置的幻灯片进行匹配，并将活动类添加到幻灯片元素中

我当前解决此问题的尝试在读取“幻灯片”的位置属性时遇到问题。我假设这是某种范围问题，但需要一些帮助来解决这个问题

var sliderNav=document.getElementById（'sliderNav'）；
var视差=新视差（sliderNav）；
var thumbs=document.querySelectorAll（'.thumbnail'）；
var thumbsArr=Array.prototype.slice.call（thumbs）；
var slides=document.querySelectorAll（'.slider\uu img'）；
var slidesArr=Array.prototype.slice.call（幻灯片）；
对于（变量i=0；i

---

这是一个使用事件委托和数据属性将thumb和主映像绑定在一起的模型

//这将清除已显示的任何图像
const hideAll=（）=>document.queryselectoral（“#sliderImages div”）.forEach（d=>d.classList.remove（'active'）；
//通过添加一个类来显示我们想要的实际图像
const showsiled=（id）=>document.querySelector（`sliderImages div[data image id=“${id}]”）。classList.add（'active'）；
//事件委派模型意味着我们可以添加新的拇指，它们将正常工作。
document.addEventListener（'mouseover'，（e）=>{
if（例如，target.matches（'.thumbnail\uu img'））{
希德尔（）；
放映幻灯片（如target.dataset.imageId）；
}
});
.slider\u容器{
字体大小：粗体；
边框：1px纯红；
最小高度：150px；
}
.slider\uu img{
显示：无；
}
.主动{
显示：块；
}

大形象1
大形象2
大图3
大图4
大图5
大图6
大图7
这是一个使用事件委托和数据属性将thumb和主映像绑定在一起的模型


//这将清除已显示的任何图像
const hideAll=（）=>document.queryselectoral（“#sliderImages div”）.forEach（d=>d.classList.remove（'active'）；
//通过添加一个类来显示我们想要的实际图像
const showsiled=（id）=>document.querySelector（`sliderImages div[data image id=“${id}]”）。classList.add（'active'）；
//事件委派模型意味着我们可以添加新的拇指，它们将正常工作。
document.addEventListener（'mouseover'，（e）=>{
if（例如，target.matches（'.thumbnail\uu img'））{
希德尔（）；
放映幻灯片（如target.dataset.imageId）；
}
});
.slider\u容器{
字体大小：粗体；
边框：1px纯红；
最小高度：150px；
}
.slider\uu img{
显示：无；
}
.主动{
显示：块；
}

大形象1
大形象2
大图3
大图4
大图5
大图6
大图7
幻灯片。数据集
不起作用，幻灯片也不起作用。类列表
<代码>幻灯片

是节点列表，而不是单个元素。标记-您是否试图创建一个解决方案，其中用户将鼠标悬停在拇指上，并显示拇指的较大图像？如果是这样，您如何加载HTML？它现在是手写的吗？您可能希望使用类名或数据属性链接thumb~图像。@Bibberty否，缩略图和滑块中的图像将是两个单独的图像。缩略图对于它们是什么有点误导性，它们是公司产品的图像，而加载在滑块上的图像是用户悬停在上面的特定产品的生活方式图像。好的，下面的解决方案可以很好地工作。但是请注意我们是如何链接图像的。

slides.dataset

不起作用，而且

slides.classList

也不起作用<代码>幻灯片是节点列表，而不是单个元素。标记-您是否试图创建一个解决方案，其中用户将鼠标悬停在拇指上，并显示拇指的较大图像？如果是这样，您如何加载HTML？它现在是手写的吗？您可能希望使用类名或数据属性链接thumb~图像。@Bibberty否，缩略图和滑块中的图像将是两个单独的图像。缩略图对于它们是什么有点误导性，它们是公司产品的图像，而加载在滑块上的图像是用户悬停在上面的特定产品的生活方式图像。好的，下面的解决方案可以很好地工作。但请注意我们是如何链接图像的。