Question

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

这是我的截图

这是我在JQuery Code中的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大于0，请在qte点击事件中结帐，然后再减少计数器：

counter>0?counter--:counter;

希望这有帮助。

＆＃13;

$(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);
  });
});

＆＃13;

<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>

＆＃13;

如何从多ID获取特定ID？

1 个答案: