javascript - 我在编写一个 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>

标签： javascripthtmlslider

Answer 1

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

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>