如何从多个ID获取特定ID？

Question

在我的情况下，我想用加号或减号将加号或减号按钮计入文本框中。我能行。但我有错误。有相同设计但ID不同的多行（我的意思是使用自动增量ID）。当我点击顶部或中间行的加号按钮，但它不适用于它自己的行。它总是在最后一行工作。

这里是我的截图

这里是我的jQuery代码的HTML。当点击右上角的添加按钮时，此代码工作。这不是问题。

<input id="qty1" type="text" class="form-control dateadd" style="border-  radius:0px;" name="count_date[]" value="0"> 

这是我处理JQuery代码。

var test; 
$('.dateadd').each(function() { 
    var test = this.id; 
    console.log("ID is",test, "Hello, world!"); 
}); 

$(document).ready(function(){ 
    $('.plus').click(function() { 
     var counter = $(test).val(); 
     counter++ ; 
     $(test).val(counter); 
    }); 
}); 

$(document).ready(function(){ 
    $('.minus').click(function() { 
     var counter = $(test).val(); 
     counter-- ; 
     $(test).val(counter); 
    }); 
}); 

这是我行HTML代码

<div class="col-sm-5" style="padding-right:0;"> 
    <div class="input-group"> 
     <span class="input-group-btn"> 
     <a class="btn btn-default plus" type="button" style="background-color:#7ec1cb;color:#fff;border-radius:0px;">＋</a> 
     <a class="btn btn-default minus" style="color:#7ec1cb;border-radius:0px;">－</a>  
     </span> 
     <input type="text" class="form-control qty" style="border-radius:0px;" name="count_date[]" value="0"> 
     </div> 
    </div> 

这是我行jQuery的添加+ HTML代码

var perDayHtml = '<div class="col-sm-5" style="padding-right:0;">'+ 
             '<div class="input-group">'+ 
              '<span class="input-group-btn">'+ 
               '<a class="btn btn-default plus" type="button" style="background-color:#7ec1cb;color:#fff;border-radius:0px;">＋</a>'+ 
               '<a class="btn btn-default minus" style="color:#7ec1cb;border-radius:0px;">－</a>'+ 
              '</span>'+ 
              '<input id="qty1" type="text" class="form-control dateadd" style="border-radius:0px;" name="count_date[]" value="0">'+ 
             '</div>'+ 
            '</div>' 

$("#optionBox").on('click', '.addPerDay', function(){ 
    $('.remove').prop('disabled', false); 
    if (rowNo<maxi && rowNo<minusmaxi) { 

     rowNo++; 
     plan++; 

     $(".perDay:last").after(perDayHtml.replace(/qty1/g,"qty" + rowNo)); 

Answer 1

我猜你已经在同一个div plus/minus按钮与dateadd输入，所以你可以去父母div然后找到dateadd输入：

$(document).ready(function(){ 
    $('body').on('click', '.plus', function() { 
     var parent = $(this).closest('div'); 
     var counter = parseInt(parent.find('.qty').val()); 
     counter++ ; 
     parent.find('.qty').val(counter); 
    }); 

    $('body').on('click', '.minus', function() { 
     var parent = $(this).closest('div'); 
     var counter = parseInt(parent.find('.qty').val()); 
     counter-- ; 
     parent.find('.qty').val(counter); 
    }); 
}); 

注1：不需要多个ready函数。

注2：您应该使用事件委派.on()而不是.click()因为你的代码是动态添加到DOM。

注3：入住minus click事件如果qte大于0降低柜台前：

counter>0?counter--:counter; 

希望这有助于。

$(document).ready(function(){ 
 
    $('body').on('click', '.plus', function() { 
 
    var parent = $(this).closest('div'); 
 
    var counter = parseInt(parent.find('.qty').val()); 
 
    counter++ ; 
 
    parent.find('.qty').val(counter); 
 
    }); 
 

 
    $('body').on('click', '.minus', function() { 
 
    var parent = $(this).closest('div'); 
 
    var counter = parseInt(parent.find('.qty').val()); 
 
    counter>0?counter--:counter; 
 
    parent.find('.qty').val(counter); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> 
 

 
<div class="input-group"> 
 
    <span class="input-group-btn"> 
 
    <a class="btn btn-default plus" type="button" style="background-color:#7ec1cb;color:#fff;border-radius:0px;">＋</a> 
 
    <a class="btn btn-default minus" style="color:#7ec1cb;border-radius:0px;">－</a>  
 
    </span> 
 
    <input type="text" class="form-control qty" style="border-radius:0px;" name="count_date[]" value="0"> 
 
</div> 
 

 
<div class="input-group"> 
 
    <span class="input-group-btn"> 
 
    <a class="btn btn-default plus" type="button" style="background-color:#7ec1cb;color:#fff;border-radius:0px;">＋</a> 
 
    <a class="btn btn-default minus" style="color:#7ec1cb;border-radius:0px;">－</a>  
 
    </span> 
 
    <input type="text" class="form-control qty" style="border-radius:0px;" name="count_date[]" value="0"> 
 
</div> 
 

 
<div class="input-group"> 
 
    <span class="input-group-btn"> 
 
    <a class="btn btn-default plus" type="button" style="background-color:#7ec1cb;color:#fff;border-radius:0px;">＋</a> 
 
    <a class="btn btn-default minus" style="color:#7ec1cb;border-radius:0px;">－</a>  
 
    </span> 
 
    <input type="text" class="form-control qty" style="border-radius:0px;" name="count_date[]" value="0"> 
 
</div>