如何從多個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>