如何让 JS 在轮播的每个实例中运行答案

【问题标题】：How to make JS run in every instance of carousel如何让 JS 在轮播的每个实例中运行
【发布时间】：2022-11-10 17:11:07
【问题描述】：

我已经尝试了几个小时来获取我的代码，它只在第一个实例上完美运行，在每个实例上运行并且无法弄清楚。

我希望阅读更多内容不会显示何时不需要它，并且它只是第一次正确地做到了。

我尝试了不同的变量，let，const，最后我尝试添加一个函数，但它一直不起作用。

<!-- Runs only on first instance -->
<script>

var element = document.querySelector('.short-text'); 
if(element) { 
    document.querySelector('.read-more-button').setAttribute('hidden',true);
}

</script>

<!-- My attempt to run every time -->
<script>

function myFunction() {
var elements = document.querySelector('.short-text');
if(elements) { 
    document.querySelector('.read-more-button').setAttribute('hidden',true);
}}
myFunction()
;

</script>

【问题讨论】：

你想为read-more-button 为每个类short-text 的元素运行setAttribute('hidden', true) 吗？
是的！现在，在轮播中，它只在第一个上运行，而不是其余的。

标签： javascript carousel

【解决方案1】：

因为document.querySelector 只返回第一个元素。您应该使用 document.querySelectorAll 并遍历返回的元素。

const elements = document.querySelectorAll(".short-text");

elements.forEach((item) => {
    let button = item.querySelector(".read-more-button");
    if (button) {
        button.setAttribute('hidden',true);
    }
});

【讨论】：