JS代码仅对首个.incrementer容器生效，多实例适配问题求助

Hey there! I see exactly what's going on here. Your current code uses document.querySelector() which only grabs the first element that matches each selector. That's why only your first .incrementer works—all your variables are tied to that single container's elements, and the rest are completely ignored.

Let's fix this by refactoring the code to handle multiple .incrementer containers properly. We'll loop through all containers, bind events to each one individually, and make sure each has its own independent state (like count, min/max values).

Modified JavaScript Code #

// Get all incrementer containers on the page
const incrementers = document.querySelectorAll('.incrementer');

// Loop through each incrementer to set up its functionality
incrementers.forEach(incrementer => {
  // Select elements **inside the current incrementer container**
  const incrementerHandle = incrementer.querySelector('.value');
  const incrementValue = incrementer.querySelector('.value span');
  const downButton = incrementer.querySelector('.down');
  const upButton = incrementer.querySelector('.up');
  const peek = incrementer.querySelector('.peek'); // Ensure this element exists in your HTML!

  // Handle Bounds (adjust per incrementer if needed)
  const neutral = '50%';
  const upper = 50;
  const lower = 10;

  // Count Bounds (unique to this incrementer)
  let count = 0;
  const minCount = 0;
  const maxCount = 100;

  // Timer for holding (unique to this incrementer)
  let timer;

  // Bind events to this incrementer's buttons
  downButton.addEventListener('click', incrementDown);
  upButton.addEventListener('click', incrementUp);

  // All functions are scoped to this incrementer
  function dragEndHandler() {
    peek.classList.remove('active');
    checkPosition();
    clearInterval(timer);
    incrementerHandle.style.left = neutral;
  }

  function timerTick() {
    peek.classList.add('active');
    checkPosition();
  }

  function checkPosition() {
    // Note: Make sure `dragger` is scoped to the active incrementer!
    // If dragger is global, track which incrementer is being dragged to avoid cross-container issues
    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.textContent = count; // Use textContent instead of innerHTML for security
    checkDisplay();
  }

  function checkDisplay() {
    if (count <= minCount) {
      downButton.classList.add('disabled');
    } else {
      downButton.classList.remove('disabled');
    }

    if (count >= maxCount) {
      upButton.classList.add('disabled');
    } else {
      upButton.classList.remove('disabled');
    }
  }
});

Key Changes Explained #

• querySelectorAll instead of querySelector: Grabs every .incrementer container on the page instead of just the first.
• Scoped element selection: Using incrementer.querySelector() ensures we only target elements inside the current container—no more mixing up controls between different incrementers.
• Independent state: Each incrementer gets its own count, timer, and bounds variables. Changes to one container won't affect the others.
• Per-container event listeners: Buttons are bound to their own incrementer's functions, so clicks on one container's controls won't trigger actions on another.

Quick Note on the dragger Variable #

I noticed you're using a dragger variable in checkPosition()—make sure this is scoped correctly to the active incrementer. If dragger is a global variable, add logic to track which incrementer is being dragged so position checks work for the right container.

Example Multiple Incrementers HTML #

<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 class="peek"></div> <!-- Don't forget this element if using the peek functionality! -->
  </div>

  <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 class="peek"></div>
  </div>
</div>

内容的提问来源于stack exchange，提问作者the preacher