显示当前滑块的数据属性元素

Question

我是JS的初学者，我制作了一个带有数据属性的旋转木马，我想显示它，当我们进入下一个或上一个滑块时，它必须更改。

目前我做了一个小脚本，我只能显示第一个滑块的数据属性

HTML:

<div class="carousel2partsUp slick-initialized slick-slider">
<div class="el-carousel2parts slick-slide slick-current slick-active" data-legend="legend1">
{#    Content #}
</div>
<div class="el-carousel2parts slick-slide" data-legend="legend2">{#    Content #}</div>
<div class="el-carousel2parts slick-slide" data-legend="legend3">{#    Content #}</div>
<div class="el-carousel2parts slick-slide" data-legend="legend4">{#    Content #}</div>
</div>
<span id="legend"></span>

JS:

<script>
var carousel = document.querySelector('.el-carousel2parts');
var spanLegend = document.querySelector('#legend');
var dataLegend = carousel.dataset.legend;
spanLegend.innerHTML = dataLegend;
</script>

如何改进代码以根据好的滑块显示数据属性？

我应该绕一圈吗？还是用事件点击？

感谢回答

Answer 1

如果您只有一张活动幻灯片，则无需循环即可完成：

var carousel = document.querySelector('.el-carousel2parts');
var spanLegend = document.querySelector('#legend');
// Find which is active and get its attribute:
var currentSlide = document.querySelector('.slick-active');
var currentData = currentSlide.getAttribute('data-legend');
var dataLegend = currentData;
spanLegend.innerHTML = dataLegend;

我没有看到你的完整代码，所以只是猜测。您可以制作onClick函数并调用新的两行代码。点击按钮，更新幻灯片。想象一下，我们有几个按钮可以滚动浏览幻灯片。

<button class="turn">Left</button>
<button class="turn">Right</button>

在这种情况下，我们可以有这样的东西：

var spanLegend = document.querySelector('#legend');
var btnsTurn = document.querySelectorAll('.turn'); 
btnsTurn.forEach(item => {
item.addEventListener("click", () => {
var currentSlide = document.querySelector('.slick-active');
var currentData = currentSlide.getAttribute('data-legend');
spanLegend.innerHTML = currentData;
});
})

但我假设您已经有了一个函数，可以添加类"slick active"并将其从另一张幻灯片中删除。所以你可以在里面添加一些代码，而不需要为相同的按钮添加新的forEach。

PS您从DOM中获取一个可以由任何用户编辑的属性。一般来说，小心innerHTML是一个危险的函数。

希望这能有所帮助！问候，