jQuery .val() 方法失效：数字输入框增减按钮功能异常求助

Hey there! I see you're trying to build a number input with plus/minus buttons using jQuery, and you've hit a snag even after checking similar solutions. Let's get this sorted out—your core idea is solid, but there are a few common pitfalls that might be tripping you up.

First, let's start with the complete HTML structure you'll need (I'm guessing you might have this, but it's good to confirm):

<div class="number-controls">
  <button id="minus">-</button>
  <input type="number" id="pages" value="0" min="0">
  <button id="plus">+</button>
</div>

Now here's the refined jQuery code that handles all the edge cases:

$(function() {
  // Handle plus button click
  $("#plus").click(function() {
    // Convert input value to integer (critical—val() returns a string!)
    let currentVal = parseInt($('#pages').val(), 10);
    
    // Fallback to 0 if input has non-numeric content
    if (isNaN(currentVal)) {
      currentVal = 0;
    }
    
    // Increment and update the input
    $('#pages').val(currentVal + 1);
  });

  // Handle minus button click
  $("#minus").click(function() {
    let currentVal = parseInt($('#pages').val(), 10);
    
    if (isNaN(currentVal)) {
      currentVal = 0;
    }
    
    // Prevent going below 0 (adjust this if you allow negative numbers)
    if (currentVal > 0) {
      $('#pages').val(currentVal - 1);
    }
  });
});

Key Fixes & Explanations: #

• Convert to Number: The biggest mistake people make here is forgetting that $('#pages').val() returns a string. If you try to do pages_val + 1 directly, you'll end up with string concatenation (like "0" + 1 = "01") instead of actual addition. Using parseInt() fixes this.
• Handle Invalid Input: If someone manually types non-numeric text into the input, isNaN() checks for that and resets to 0 to keep the logic working.
• Minimum Value Check: The minus button won't let the value drop below 0 (match this to your input's min attribute if you change it).
• Document Ready Wrap: Your original code uses $(function() {}) which is correct—it ensures the code runs only after the DOM is loaded.

This should work smoothly for your use case! Test it out, and let me know if you run into any other issues.

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