javascript - 为什么 js 中的滑块不适用于所有元素?
问题描述
我正在尝试自己在香草js中创建滑块,但我得到了它的逻辑。我已经尝试过 if 和循环,但是 smth 出错了并且根本不起作用。我需要什么条件才能使此滑块适用于所有报价?先感谢您。
const quotesBtnNext = document.querySelector('#quo-btn-next'),
quotesBtnPrev = document.querySelector('#quo-btn-prev'),
quotesParent = document.querySelector('.quotes-wrapper'),
quotes = document.querySelectorAll('.quotes-wrapper .quotes-wrapper__quote'),
dots = document.querySelectorAll('.quotes__scroll');
let quoteIndex = 1;
quotesBtnNext.addEventListener('click', ()=>{
quotes.forEach(nextQuote());
});
quotesBtnPrev.addEventListener('click', ()=>{
quotes.forEach(prevQuote());
});
function nextQuote(){
quotes[quoteIndex + 1].style.display = 'block';
quotes[quoteIndex - 1].style.display = 'none';
}
function prevQuote() {
quotes[quoteIndex + 1].style.display = 'none';
quotes[quoteIndex - 1].style.display = 'block';
}
<div class="quotes-wrapper">
<div class="quotes-wrapper__quote quotes-first">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris quis nostrud nisi ut aliquip ex ea commodo consequat.</p>
<p>Jhone Due, Photographer</p>
</div>
<div class="quotes-wrapper__quote">
<p>haha text</p>
<p>Abraham Due, Photographer</p>
</div>
<div class="quotes-wrapper__quote">
<p>another text</p>
<p>David Due, Photographer</p>
</div>
<div class="quotes-wrapper__quote">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris quis nostrud nisi ut aliquip ex ea commodo consequat.</p>
<p>Lora Due, Photographer</p>
</div>
</div>
解决方案
推荐阅读
- docker - 如何加快 Gitlab 构建过程 - Docker & Yarn/Lerna
- c++ - C++ double 变量在复制到另一个 double 中时会丢失精度
- javascript - 如何计算“li”元素并使用 Selenium 和 JavaScript 断言它们的数量?
- ios - 应用程序终止时用户未注销
- java - 如何检查当前登录的用户属性是否与android中的另一个表属性相等?
- r - R将函数应用于多个数据帧
- swift - 推送视图控制器时发现线程错误为零
- java - 不满足条件异常;必须被抓住或宣布被扔掉
- pascal - 从控制台清除单个空格
- hikvision - 海康威视 C# SDK - 音频异常检测