根据滑块索引位置更改类名

Posted 2023-02-25

【中文标题】根据滑块索引位置更改类名

【英文标题】：Change classname based on slider index position

【发布时间】：2020-04-01 08:34:59

【问题描述】：

我想根据 https://stackblitz.com/edit/react-slick-slider-issues 中选择的滑块 data-index 位置更改 className，它正在使用 React-slick-slider。

假设如果用户将鼠标悬停在第一张图片上，图片的 data-index 值为 0，我想将图片推到滑块上方，onMouseOut 图片将返回到它在滑块中的原始位置，并对最后一张图像执行此操作。

对于第一个和最后一个图像之间的所有图像，它们将被下推。当前悬停在图像上时，它们将被向下推，onMouseOut 它们将返回到滑块中的原始位置。

如果 className 默认为 unique-image 是否可以将 First Image 更改为 unique-image首先，如果它是最后一张图片，那么 className 应该是 unique-image Last 并且对于所有 in-图片之间应该是unique-image between。这是可以实现的吗？

【问题讨论】：

您是否正在映射图像以显示它们？然后您可以使用三级运算符检查索引是 0 还是列表中的最后一个。

是的，我正在映射图像，你能分享一个代码 sn-p 吗？

【参考方案1】：

当您映射图像时，您可以使用三级运算符：

const images = [...something];

images.map((image, key) => <img className=`unique-image $key === 0 ? "First" : key == images.length - 1 ? "Last" : ""` ...otherProps />

因此，您使用 map 函数中的键来检查第一个和最后一个元素，并在到达时添加相应的类。