在div.el-分页时为按钮添加元素

Question

我正在使用代码JavaScript代码这是我试图添加的aria-label，但有些地方缺少

document.querySelectorAll('.el-pagination').forEach(button => button.setAttribute('aria-label',(button.getElementsByClassName('el-icon-arrow-left').length == 1) ? 'Previous' : 'Next'));

这是我的html 代码

<div class="el-pagination" aria-label="Previous">
<span class="el-pagination__sizes">
<div class="el-select el-select--mini">
<!---->
<div class="el-input el-input--mini el-input--suffix">
<!---->
<input type="text" readonly="readonly" autocomplete="off" placeholder="Select" class="el-input__inner">
<!---->
<span class="el-input__suffix">
<span class="el-input__suffix-inner">
<i class="el-select__caret el-input__icon el-icon-arrow-up"></i>
<!---->
<!---->
<!---->
<!---->
<!---->
</span>
<!---->
</span>
<!---->
<!---->
</div>
<div class="el-select-dropdown el-popper pagination-popper" style="display: none; min-width: 175px;">
<div class="el-scrollbar" style="">
<div class="el-select-dropdown__wrap el-scrollbar__wrap" style="margin-bottom: -17px; margin-right: -17px;">
<ul class="el-scrollbar__view el-select-dropdown__list">
<!---->
<li class="el-select-dropdown__item selected">
<span>50 items per page</span>
</li>
<li class="el-select-dropdown__item">
<span>100 items per page</span>
</li>
<li class="el-select-dropdown__item">
<span>150 items per page</span>
</li>
<li class="el-select-dropdown__item">
<span>300 items per page</span>
</li>
</ul>
</div>
<div class="el-scrollbar__bar is-horizontal">
<div class="el-scrollbar__thumb" style="transform: translateX(0%);"></div>
</div>
<div class="el-scrollbar__bar is-vertical">
<div class="el-scrollbar__thumb" style="transform: translateY(0%);"></div>
</div>
</div>
<!---->
</div>
</div>
</span>
<button type="button" disabled="disabled" class="btn-prev">
<i class="el-icon el-icon-arrow-left"></i>
</button>
<ul class="el-pager">
<li class="number active">1</li>
<!---->
<li class="number">2</li>
<li class="number">3</li>
<li class="number">4</li>
<!---->
<li class="number">5</li>
</ul>
<button type="button" class="btn-next">
<i class="el-icon el-icon-arrow-right"></i>
</button>
</div>

所以我的JavaScript出错了我不知道是什么

Answer 1

您可以在html中添加aria-label元素，而无需在这里使用任何js

但是如果你愿意，你也可以使用js这样做:

document.querySelectorAll('.btn-prev').forEach(button => button.setAttribute('aria-label', 'Previous'))
document.querySelectorAll('.btn-next').forEach(button => button.setAttribute('aria-label', 'Next'))