JS/jQuery多增减按钮问题：独立控制输入框失效求助

Hey Stefan, this is a super common issue when working with repeated UI components like shopping cart items—let’s break down why all your buttons are targeting the first input, and how to fix it.

The Root Cause #

Chances are, you’re either:

• Using duplicate IDs for your input boxes/buttons (IDs are unique in HTML, so querying by ID will always grab the first match), or
• Not narrowing down your selector to only target the input that’s paired with the clicked button (instead, you’re selecting all inputs and modifying the first one).

Solution: Use Relative DOM Traversal #

The fix relies on targeting the input relative to the button that was clicked. First, make sure your HTML groups each product’s controls in a container (like a div.product-item), and use classes instead of IDs for repeated elements.

Step 1: Update Your HTML Structure

Wrap each product’s controls in a shared parent, and use class selectors:

<!-- Product 1 -->
<div class="product-item">
  <button class="quantity-btn quantity-btn--decrease">-</button>
  <input type="number" class="quantity-input" value="1" min="1">
  <button class="quantity-btn quantity-btn--increase">+</button>
</div>

<!-- Product 2 -->
<div class="product-item">
  <button class="quantity-btn quantity-btn--decrease">-</button>
  <input type="number" class="quantity-input" value="1" min="1">
  <button class="quantity-btn quantity-btn--increase">+</button>
</div>

Step 2: jQuery Implementation

Use closest() to jump up to the shared parent container, then find() to grab the specific input for that product:

// Decrease quantity
$('.quantity-btn--decrease').on('click', function() {
  // Get the input box associated with this button
  const $quantityInput = $(this).closest('.product-item').find('.quantity-input');
  const currentValue = parseInt($quantityInput.val());
  
  // Don't go below the minimum value
  if (currentValue > parseInt($quantityInput.attr('min'))) {
    $quantityInput.val(currentValue - 1);
  }
});

// Increase quantity
$('.quantity-btn--increase').on('click', function() {
  const $quantityInput = $(this).closest('.product-item').find('.quantity-input');
  const currentValue = parseInt($quantityInput.val());
  
  $quantityInput.val(currentValue + 1);
});

Bonus: Native JavaScript Version (if you want to practice vanilla JS too!)

Same logic, no jQuery required:

// Add event listeners to all decrease buttons
document.querySelectorAll('.quantity-btn--decrease').forEach(button => {
  button.addEventListener('click', function() {
    const input = this.closest('.product-item').querySelector('.quantity-input');
    const currentValue = parseInt(input.value);
    
    if (currentValue > parseInt(input.min)) {
      input.value = currentValue - 1;
    }
  });
});

// Add event listeners to all increase buttons
document.querySelectorAll('.quantity-btn--increase').forEach(button => {
  button.addEventListener('click', function() {
    const input = this.closest('.product-item').querySelector('.quantity-input');
    const currentValue = parseInt(input.value);
    
    input.value = currentValue + 1;
  });
});

Key Takeaways #

• Avoid duplicate IDs: Use classes for elements that repeat across multiple items.
• Use relative selection: Instead of selecting all inputs globally, always target the input that’s in the same container as the clicked button—this ensures each button pair only affects its own input.

Test this out, and you’ll see each set of buttons now controls its corresponding quantity input independently!

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