我在编写一个 JS 并将其设置为具有相同 ID 的多个 div 时遇到问题

Question

嗨，这是我的 JS，我遇到的问题是我的 js 在第一个div 上工作正常，但它对其他div 没有影响，我似乎找不到问题所在。 我想我知道问题是什么我唯一的问题是我不知道如何解决它， 如果您能帮助我，我将不胜感激 这是我的JS：

var incrementerHandle = document.querySelector('.incrementer .value');
var incrementValue = document.querySelector('.incrementer .value span');
var downButton = document.querySelector('.incrementer .down');
var upButton = document.querySelector('.incrementer .up');
var peek = document.querySelector('.incrementer .peek'); //Handle Bounds
var neutral = '50%';
var upper = 50;
var lower = 10; //Count Bounds
var count = 0;
var minCount = 0;
var maxCount = 100; //Timer for holding
var timer;
downButton.addEventListener('click', incrementDown);
upButton.addEventListener('click', incrementUp);
function dragEndHandler() {
peek.classList.remove('active');
checkPosition();
clearInterval(timer); //Return to neutral
incrementerHandle.style.left = neutral;
}
function timerTick() {
peek.classList.add('active');
checkPosition();
}
function checkPosition() {
if (dragger.position.x >= upper) {
incrementUp();
} else if (dragger.position.x <= lower) {
incrementDown();
}
}
function incrementUp() {
count++;
if (count > maxCount) {
count = maxCount;
}
updateValue();
}
function incrementDown() {
count--;
if (count < minCount) {
count = minCount;
}
updateValue();
}
function updateValue() {
incrementValue.innerHTML = count;
checkDisplay();
}
function checkDisplay() {
if (count <= minCount) {
downButton.classList.add('disabled');
} else if (count >= maxCount) {
upButton.classList.add('disabled');
} else {
downButton.classList.remove('disabled');
upButton.classList.remove('disabled');
}
}

<div class="slider">
<div class="incrementer">
<button class="mdc-button mdc-button--raised up">
<span class="mdc-button__ripple">+</span>
</button>
<button class="value">
<span>0</span>
</button>
<button class="mdc-button mdc-button--raised down">
<span class="mdc-button__ripple">-</span>
</button>
</div>
</div>

Answer 1

根据您在评论行上的解释，您有多个具有与您发布的类似实现的类slider的div。在这种情况下，您必须使用返回节点列表的querySelectorAll()，而不是使用返回单个元素的querSelector()。我相应地做了一些调整。

var downButton = document.querySelectorAll('.incrementer .down');
var upButton = document.querySelectorAll('.incrementer .up');
var peek = document.querySelector('.incrementer .peek'); //Handle Bounds
var neutral = '50%';
var upper = 50;
var lower = 10; //Count Bounds
var minCount = 0;
var maxCount = 100; //Timer for holding
var timer;
downButton.forEach( down => down.addEventListener('click', incrementDown));
upButton.forEach( up => up.addEventListener('click', incrementUp));
function dragEndHandler() {
peek.classList.remove('active');
checkPosition();
clearInterval(timer); //Return to neutral
incrementerHandle.style.left = neutral;
}
function timerTick() {
peek.classList.add('active');
checkPosition();
}
function checkPosition() {
if (dragger.position.x >= upper) {
incrementUp();
} else if (dragger.position.x <= lower) {
incrementDown();
}
}
function incrementUp(e) {
let element = e.target;
let count = 0;
if( element.classList.contains('mdc-button') ){
count = Number( element.nextElementSibling.firstElementChild.innerHTML ) + 1;
if (count > maxCount) {
count = maxCount;
}

element.nextElementSibling.firstElementChild.innerHTML = count;   
checkDisplay(count, element);   
}
else {
count = Number( element.parentElement.nextElementSibling.firstElementChild.innerHTML ) + 1;
if (count > maxCount) {
count = maxCount;
}

element.parentElement.nextElementSibling.firstElementChild.innerHTML = count;
checkDisplay(count, element.parentElement);
}
}
function incrementDown(e) {
let element = e.target;
let count = 0;
if( element.classList.contains('mdc-button') ){
count = Number( element.previousElementSibling.firstElementChild.innerHTML ) - 1;
if (count < minCount) {
count = minCount;
}

element.previousElementSibling.firstElementChild.innerHTML = count;      
checkDisplay(count, element);
}
else {
count = Number( element.parentElement.previousElementSibling.firstElementChild.innerHTML ) - 1;
if (count < minCount) {
count = minCount;
}

element.parentElement.previousElementSibling.firstElementChild.innerHTML = count;
checkDisplay(count, element.parentElement);
}
}
function checkDisplay(count, element) {
if (count <= minCount) {
element.classList.add('disabled');
} else if (count >= maxCount) {
element.classList.add('disabled');
} else {
element.classList.remove('disabled');
element.classList.remove('disabled');
}
}

#con{
border: 1px solid black;
padding: 10px;
width: 65%;
margin: 0 auto;
display: flex;
flex-direction: column;
justify-content: space-around;
text-align: center;
}
#con1{
border: 1px solid black;
flex-wrap: wrap;
display: flex;
flex-direction: row;
justify-content: space-around;
padding: 5px;
}
button{
background-color: #4CAF50; /* Green */
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
}
select{
margin-top: 20px;
}
.redbu{
background-color: red;
}
.bluebu{
background-color: royalblue;
}
.greenbu{
background-color: #4CAF50;
}
.yellowbu{
background-color: yellow;
}

<div class="slider">
<div class="incrementer">
<button class="mdc-button mdc-button--raised up">
<span class="mdc-button__ripple">+</span>
</button>
<button class="value">
<span>0</span>
</button>
<button class="mdc-button mdc-button--raised down">
<span class="mdc-button__ripple">-</span>
</button>
</div>
</div>
<div class="slider">
<div class="incrementer">
<button class="mdc-button mdc-button--raised up">
<span class="mdc-button__ripple">+</span>
</button>
<button class="value">
<span>0</span>
</button>
<button class="mdc-button mdc-button--raised down">
<span class="mdc-button__ripple">-</span>
</button>
</div>
</div>
<div class="slider">
<div class="incrementer">
<button class="mdc-button mdc-button--raised up">
<span class="mdc-button__ripple">+</span>
</button>
<button class="value">
<span>0</span>
</button>
<button class="mdc-button mdc-button--raised down">
<span class="mdc-button__ripple">-</span>
</button>
</div>
</div>