如何使用jQuery更改Javascript数组中第一个元素的类？

我想用缩略图创建简单的产品滑块。虽然可能有3个以上的缩略图，但我只想显示其中的3个。通过点击“更多”按钮，我的目标是隐藏第一个已经可见的图像，并通过改变其类别从隐藏的图像中显示一个

代码工作正常，直到隐藏图像[0]。Firefox控制台出现以下错误：“TypeError:hiddenImages[0]未定义”

我做错了什么

//所有图像
变量图像=$（“[数据图像]”）；
//点击查看更多图片
var more=$（'.more'）；
//将show类添加到所有图像
images.each（函数（索引，元素）{$（this.parent（）.addClass（'visible'）}）
//隐藏从第四个图像开始的图像
images.each（函数（索引，元素）{if（$（this）.data（'image'）>=4）
{$（this.parent（）.removeClass（'visible'）.addClass（'hidden'）}）
//单击缩略图时显示大图像
图像。每个（函数（索引、元素）{
$（this）.click（function（）{$（'picimg'）.attr（'src'，$（this.attr（'src'））}）
//从可见图像中隐藏第一个，从隐藏图像中显示第一个
有关（'单击'，函数（）的更多信息{
//找到所有隐藏的图像并从第一个图像中删除可见类
hiddenImages=images.hasClass（'hidden'）；
hiddenImages[0]。removeClass（'visible'）。addClass（'hidden'）；
})

#pic{
宽度：300px；
高度：300px；
边框：1px实心#ccc；
右边距：5px；
浮动：左；
}
.缩略图{
高度：300px；
宽度：50px；
填充：0；
保证金：0；
右边距：10px；
浮动：左；
}
.缩略图李{
显示：内联；
列表样式：无；
浮动：左；
宽度：70px；
高度：70像素；
边缘底部：5px；
边框：1px实心#ccc；
文本对齐：居中；
}
.缩略图{
宽度：70px；
高度：70像素；
光标：指针；
}
.更多{
显示：内联；
列表样式：无；
浮动：左；
宽度：70px；
高度：70像素；
边缘底部：5px；
边框：1px实心#ccc；
文本对齐：居中；
}
.hidden{显示：无！重要；}
.visible{display:block！important；}

更多

图像。hasClass（'hidden'）

不会做您认为它会做的事情。退房它返回一个布尔值

假设您正试图使用该类获取对象数组，则需要使用

find（）

您还需要确认

images.find（'.hidden'）

的结果是否返回预期长度的数组（下面未演示）

下面是一个简单的div示例：

让divsWithClass=$（“div”）.filter（“[class~='hidden']”）
警报（`divs with'hidden'类：${divsWithClass.length}`）
正如上面的答案中已经指出的，问题是
hasClass（）
返回一个布尔值而不是一组jQuery元素，随后即使hasClass（）返回一组jQuery元素，您的下一行代码也会失败，因为
隐藏图像[0]
不是jQuery对象。下面是一个示例，说明如何拥有3个活动图像并交换类：


$（函数（）{
//所有图像
变量图像=$（“[数据图像]”），
//点击查看更多图片
更多=$（'.more'）；
//将show类添加到所有图像
图像。每个（函数（索引、元素）{
$（this.parent（）.addClass（'visible'））
})
//隐藏从第四个图像开始的图像
图像。每个（函数（索引、元素）{
if（$（this）.data（'image'）>=4）{
$（this）.parent（）.removeClass（'visible'）.addClass（'hidden'））
}
})
//单击缩略图时显示大图像
图像。每个（函数（索引、元素）{
$（此）。单击（函数（）{
$（'#pic img'）.attr（'src'，$（this.attr（'src'））
})
})
//从可见图像中隐藏第一个，从隐藏图像中显示第一个
变量hiddenElemInfoObj={
idx:$（'.thumbnails>li.hidden'）.first（）.index（），
initialIdx:$（'.thumbnails>li.hidden'）.first（）.index（），
lengthOfElems:$（'.thumbnails>li.hidden'）。长度-1//使长度基于零
},
VisibleLeminFoobj={
idx:$（'.thumbnails>li.visible'）.first（）.index（），
initialIdx:$（'.thumbnails>li.visible'）.first（）.index（），
lengthOfElems:$（'.thumbnails>li.visible'）。长度-1//使长度基于零
}
有关（'单击'，函数（）的更多信息{
$thumbnails=$（'.thumbnails'）；
if（parseInt（hiddenElemInfoObj['idx']）>（parseInt（hiddenElemInfoObj['initialIdx']）+parseInt（hiddenElemInfoObj['lengthOfElems']））{
hiddenElemInfoObj['idx']=$（'.thumbnails>li.hidden'）.first（）.index（）；
hiddenElemInfoObj['initialIdx']=$（'.thumbnails>li.hidden'）.first（）.index（）；
}
if（parseInt（visibleleeminfoobj['idx']）>（parseInt（visibleleeminfoobj['initialIdx']）+parseInt（visibleleeminfoobj['lengthOfElems']））{
visibleElemInfoObj['idx']=$（'.thumbnails>li.visible'）.first（）.index（）；
visibleElemInfoObj['initialIdx']=$（'.thumbnails>li.visible'）.first（）.index（）；
}
$缩略图
.儿童（‘李’）
.eq（hiddenElemInfoObj.idx）
.removeClass（'隐藏'）
.addClass（“可见”）；
$缩略图
.儿童（‘李’）
.eq（visibleleleminfoobj.idx）
.removeClass（'可见'）
.addClass（“隐藏”）；
hiddenElemInfoObj['idx']=parseInt（hiddenElemInfoObj['idx']）+1；
visibleleeminfoobj['idx']=parseInt（visibleleeminfoobj['idx']）+1；
});
});
#pic{
宽度：300px；
高度：300px；
边框：1px实心#ccc；
右边距：5px；
浮动：左；
}
.缩略图{
高度：300px；
宽度：50px；
填充：0；
保证金：0；
右边距：10px；
浮动：左；
}
.缩略图李{
显示：内联；
列表样式：无；
浮动：左；
宽度：70px；
高度：70像素；
边缘底部：5px；
more.on('click', function(){
    // Find all hidden images and remove visible class from first one
    hiddenImages = images.filter("[class~='hidden']");
    hiddenImages[0].removeClass('visible').addClass('hidden');
})