使用javascript单击元素时更改进度的值

Question

我想在每次点击时更改进度条的值。

var taps = document.getElementsByClassName('et_pb_tab');
for (var i = 0; i < taps.length; i++) {
taps[i].addEventListener('click', () => {
var v1 = document.getElementById('p1').value;
v1.value = v1 + 20;
});
}

li.et_pb_tab_active {
background-color: rgba(255, 211, 14, 0.29);
}

<progress value="0" max="100" id="p1"></progress>
<ul class="et_pb_tabs_controls">
<li class="et_pb_tab et_pb_tab_active"><a href="#">Clase N° 1</a></li>
<li class="et_pb_tab" style="height: 64.8px;"><a href="#">Clase N° 2</a></li>
<li class="et_pb_tab" style="height: 64.8px;"><a href="#">Clase N° 3</a></li>
<li class="et_pb_tab" style="height: 64.8px;"><a href="#">Clase N° 4</a></li>
<li class="et_pb_tab" style="height: 64.8px;"><a href="#">Clase N° 5</a></li>
</ul>

我试图得到元素"；et_pb_tab"；也就是说，每点击一次，用一个for添加监听器，然后点击点击，进度条会将值增加20，但它不起作用。

Answer 1

你非常接近。您混淆了进度元素本身及其值。下面是一个稍微修改过的工作示例：

const
v1 = document.getElementById('p1'),
taps = document.getElementsByClassName('et_pb_tab');
for (const tap of taps) {  
tap.addEventListener('click', () => v1.value += 20);
}

.et_pb_tab{ width: 2em; margin-bottom: 0.5em; border: 1px solid grey; text-align: center; }

<progress value="0" max="100" id="p1"></progress>
<ul class="et_pb_tabs_controls">
<li class="et_pb_tab"> 1 </li>
<li class="et_pb_tab"> 2 </li>
<li class="et_pb_tab"> 3 </li>
<li class="et_pb_tab"> 4 </li>
<li class="et_pb_tab"> 5 </li>
</ul>

但您可能需要考虑使用事件委派：

const
v1 = document.getElementById('p1'),
container = document.getElementsByClassName('et_pb_tabs_controls')[0];
container.addEventListener('click', handleClick);
function handleClick(event){ // Events bubble up to ancestors
const clickedThing = event.target;
if(!clickedThing.classList.contains("et_pb_tab")){//Ignores irrelevant clicks
return;
}
v1.value += 20;
}

.et_pb_tab{ width: 2em; margin-bottom: 0.5em; border: 1px solid grey; text-align: center; }

<progress value="0" max="100" id="p1"></progress>
<ul class="et_pb_tabs_controls">
<li class="et_pb_tab"> 1 </li>
<li class="et_pb_tab"> 2 </li>
<li class="et_pb_tab"> 3 </li>
<li class="et_pb_tab"> 4 </li>
<li class="et_pb_tab"> 5 </li>
</ul>

Answer 2

1. 此时您正立即从progress元素中获取value。只需选择元素，然后在计算中使用其新值。

2. 预先缓存所需的所有元素，这样您就不需要每次单击都触及DOM。

3. 锚的作用不大，所以你可能可以将其移除。

4. 您可以将一个附加到容器(ul元素(，而不是将侦听器附加到每个列表项，然后使其捕获来自其子级的事件，因为它们"；冒泡"；DOM。这就是所谓的事件委派。

5. 如果您想将active类添加/删除到列表项中，您可以执行此操作。在handleClick函数中，首先从列表项中删除所有active类，然后向单击的元素中添加一个。

// Cache the progress bar, list and list items up front
const progress = document.querySelector('#p1');
const list = document.querySelector('.et_pb_tabs_controls');
const items = list.querySelectorAll('li.et_pb_tab');
// Add one listener to the list element
list.addEventListener('click', handleClick);
// When the listener detects a click...
function handleClick(e) {
// ...check that it's a list item
if (e.target.matches('li')) {
// Iterate over the list items removing all their
// active classes
items.forEach(item => item.classList.remove('active'));
// Add one to the clicked element
e.target.classList.add('active');
// Update the value of the progress bar
progress.value = progress.value + 20;
}
}

:root { --active: rgba(255,211,14,0.29); }
ul { list-style: none; margin-left: 0px; padding-left: 0px; }
li { background-color: lightgray; padding: 0.25em; }
li:hover { cursor: pointer; background-color: var(--active) }
.active { background-color: var(--active) }

<progress value="0" max="100" id="p1"></progress>
<ul class="et_pb_tabs_controls">
<li class="et_pb_tab">Clase N° 1</li>
<li class="et_pb_tab">Clase N° 2</li>
<li class="et_pb_tab">Clase N° 3</li>
<li class="et_pb_tab">Clase N° 4</li>
<li class="et_pb_tab">Clase N° 5</li>
</ul>

Answer 3

我想你正在寻找更像这样的东西？

const
progressBarEl = document.querySelector('#p1')
, taps          = document.querySelector('ul.et_pb_tabs_controls')
, tpas_li       = document.querySelectorAll('ul.et_pb_tabs_controls > li')
;
taps.onclick = evt =>
{
if (!evt.target.matches('ul.et_pb_tabs_controls > li')) return

tpas_li.forEach( (li,indx) =>
{
if ( li.classList.toggle('et_pb_tab_active', li===evt.target) )
{
progressBarEl.value = (indx +1) *20
}
})
}

body {
font-family      : Arial, Helvetica, sans-serif;
font-size        : 16px;
}
ul.et_pb_tabs_controls {
list-style: none;
}
ul.et_pb_tabs_controls li {
height      : 2em;
line-height : 2em;
cursor      : pointer;
}
ul.et_pb_tabs_controls li.et_pb_tab_active {
background-color: rgba(255, 211, 14, 0.29);
}

<progress value="20" max="100" id="p1"></progress>
<ul class="et_pb_tabs_controls">
<li class="et_pb_tab_active" > Clase N° 1 </li>
<li           > Clase N° 2 </li>
<li           > Clase N° 3 </li>
<li           > Clase N° 4 </li>
<li           > Clase N° 5 </li>
</ul>