如何解决保持选中页面Javascript上的多个元素
我正在尝试添加一个功能来更改选定元素的外观,从而允许在页面中进行多个选择,但每个幻灯片只能选择一个。您能否提一些建议?这是小提琴:codepen.io/rebekaranna/pen/gOrXzdp 非常感谢!
const totalDiv = document.querySelector('.total');
const sliderScores = [0,0];
function updateTotal() {
totalDiv.textContent = sliderScores[0] + sliderScores[1];
}
document.querySelectorAll('.slider-1-score-section').forEach(scoreSection => {
scoreSection.addEventListener('click',(event) => {
sliderScores[0] = parseInt(event.target.textContent,10);
updateTotal();
})
});
document.querySelectorAll('.slider-2-score-section').forEach(scoreSection => {
scoreSection.addEventListener('click',(event) => {
sliderScores[1] = parseInt(event.target.textContent,10);
updateTotal();
})
});
function select (elem) {
var a = document.getElementsByTagName('slider-1-score-section');
for (i = 0; i < a.length; i++) {
a[i].classList.remove('active');
}
elem.classList.add('active');
}
.active {
color: blue;
background-color: red;
}
<div class="container-test">
<div class="heading-box">
<h3 class="heading-t3">select your score 1</h3>
<div class="heading-line"></div>
</div>
<div class="slider-test-1">
<div class="slider-test">
<div class="slider-score">
<div class="slider-1-score-section" onclick="select(this)"><h2 class="heading-t2">1</h2></div>
<div class="slider-1-score-section" onclick="select(this)"><h2 class="heading-t2">2</h2></div>
<div class="slider-1-score-section" onclick="select(this)"><h2 class="heading-t2">3</h2></div>
</div>
<p class="test-text">Description</p>
</div>
<div class="slider-test">
<div class="slider-score">
<div class="slider-1-score-section"><h2 class="heading-t2">4</h2></div>
<div class="slider-1-score-section"><h2 class="heading-t2">5</h2></div>
<div class="slider-1-score-section"><h2 class="heading-t2">6</h2></div>
</div>
<p class="test-text">Description</p>
</div>
<div class="slider-test">
<div class="slider-score">
<div class="slider-1-score-section"><h2 class="heading-t2">7</h2></div>
<div class="slider-1-score-section"><h2 class="heading-t2">8</h2></div>
<div class="slider-1-score-section"><h2 class="heading-t2">9</h2></div>
</div>
<p class="test-text">Description</p>
</div>
<div class="slider-test">
<div class="slider-score">
<div class="slider-1-score-section"><h2 class="heading-t2">10</h2></div>
<div class="slider-1-score-section"><h2 class="heading-t2">11</h2></div>
<div class="slider-1-score-section"><h2 class="heading-t2">12</h2></div>
</div>
<p class="test-text">Description</p>
</div>
</div>
</div>
<div class="container-test">
<div class="heading-box">
<h3 class="heading-t3">select your score 2</h3>
<div class="heading-line"></div>
</div>
<div class="slider-test-2">
<div class="slider-test">
<div class="slider-score">
<div class="slider-2-score-section" onclick="select(this)"><h2 class="heading-t2">1</h2></div>
<div class="slider-2-score-section" onclick="select(this)"><h2 class="heading-t2">2</h2></div>
<div class="slider-2-score-section" onclick="select(this)"><h2 class="heading-t2">3</h2></div>
</div>
<p class="test-text">Description</p>
</div>
<div class="slider-test">
<div class="slider-score">
<div class="slider-2-score-section"><h2 class="heading-t2">4</h2></div>
<div class="slider-2-score-section"><h2 class="heading-t2">5</h2></div>
<div class="slider-2-score-section"><h2 class="heading-t2">6</h2></div>
</div>
<p class="test-text">Description</p>
</div>
<div class="slider-test">
<div class="slider-score">
<div class="slider-2-score-section"><h2 class="heading-t2">7</h2></div>
<div class="slider-2-score-section"><h2 class="heading-t2">8</h2></div>
<div class="slider-2-score-section"><h2 class="heading-t2">9</h2></div>
</div>
<p class="test-text">Description</p>
</div>
<div class="slider-test">
<div class="slider-score">
<div class="slider-2-score-section"><h2 class="heading-t2">10</h2></div>
<div class="slider-2-score-section"><h2 class="heading-t2">11</h2></div>
<div class="slider-2-score-section"><h2 class="heading-t2">12</h2></div>
</div>
<p class="test-text">Description</p>
</div>
</div>
</div>
<div class="grid-line"></div>
<div class="total">0</div>
解决方法
使用document.getElementsByClassName('slider-1-score-section')代替document.getElementsByTagName('slider-1-score-section')。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。