如何减少和增加文本框的值?

I have a booking flight form that takes input of the number of travelers. I created 3 textboxes each taking in number of travelers for Adult, Children and Infant and a main textbox to show the final result in it, however it does not work.

我有一个预订机票的表格，里面有旅客的数量。我创建了3个文本框，每个文本框包含成人、儿童和婴儿的旅行人数，以及一个显示最终结果的主文本框。

Here is my code snippet:

下面是我的代码片段:

$(function() {
  $(".button-click a").on("click", function() {

    var $button = $(this);
    var oldValue = $button.closest("ul").prev().val();

    if ($button.text() == "+") {
      var newVal = parseInt(oldValue) + 1;

    } else {
      // Don't allow decrementing below zero
      if (oldValue > 0) {
        var newVal = parseInt(oldValue - 1);
      } else {
        newVal = 0;
      }
    }
    $button.closest("ul").prev().val(newVal);
    var total_value = 0;
    $(".cat_textbox").each(function() {
      total_value += parseInt($(this).val());
    });
    $(".main").val(total_value);
  })
});

<html>
<head>
  <title>Input Number Incrementer</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
</head>

<body>
  <label>
    Count all1 Traveller(s)
    <input type="text" class="main" value="0" placeholder="" />
  </label>
  <br/>
  <br/>
  <label>
    Adults
    <ul class="button-group button-click">
      <li><a href="#" class="small button secondary"><i class="fa fa-plus"><span class="hide">+</span></i></a>
      </li>
      <input type="text" class="cat_textbox" id="CAT_Custom_410672" name="CAT_Custom_410672" maxlength="4000" value="0" />
      <li><a href="#" class="small button secondary"><i class="fa fa-minus"><span class="hide">-</span></i></a>
      </li>
    </ul>
  </label>

  <label>
    Children
    <ul class="button-group button-click">
      <li><a href="#" class="small button secondary"><i class="fa fa-plus"><span class="hide">+</span></i></a>
      </li>
      <input type="text" class="cat_textbox" id="CAT_Custom_410672" name="CAT_Custom_410672" maxlength="4000" value="0" />
      <li><a href="#" class="small button secondary"><i class="fa fa-minus"><span class="hide">-</span></i></a>
      </li>
    </ul>
  </label>

  <label>
    Infants
    <ul class="button-group button-click">
      <li><a href="#" class="small button secondary"><i class="fa fa-plus"><span class="hide">+</span></i></a>
      </li>
      <input type="text" class="cat_textbox" id="CAT_Custom_410672" name="CAT_Custom_410672" maxlength="4000" value="0" />
      <li><a href="#" class="small button secondary"><i class="fa fa-minus"><span class="hide">-</span></i></a>
      </li>
    </ul>
  </label>
</body>
</html>

5 个解决方案

#1

You can have 2 different handlers for + and - and search input using this

您可以使用这两个不同的处理程序来处理+和-和-和搜索输入

$(function() {
  registerEvents();
});

function registerEvents(){
  $('.button-group .fa-plus').on('click', function(){
    var input = $(this).closest('li').next()
    input.val(+input.val() + 1);
    updateTravellerCount();
    return false;
  })
  $('.button-group .fa-minus').on('click', function(){
    var input = $(this).closest('li').prev()
    var val = +input.val() > 0 ? +input.val() - 1 : 0
    input.val(val);
    updateTravellerCount();
    return false;
  });
}

function updateTravellerCount(){
  var total = 0;
  $.each($('.button-group input'), function(){
    total += +$(this).val();
  });
  $('.main').val(total)
}

<html>
<head>
  <title>Input Number Incrementer</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
</head>

<body>
  <label>
    Count all1 Traveller(s)
    <input type="text" class="main" value="0" placeholder="" />
  </label>
  <br/>
  <br/>
  <label>
    Adults
    <ul class="button-group button-click">
      <li><a href="#" class="small button secondary"><i class="fa fa-plus"><span class="hide">+</span></i></a>
      </li>
      <input type="text" class="cat_textbox" id="CAT_Custom_410672" name="CAT_Custom_410672" maxlength="4000" value="0" />
      <li><a href="#" class="small button secondary"><i class="fa fa-minus"><span class="hide">-</span></i></a>
      </li>
    </ul>
  </label>

  <label>
    Children
    <ul class="button-group button-click">
      <li><a href="#" class="small button secondary"><i class="fa fa-plus"><span class="hide">+</span></i></a>
      </li>
      <input type="text" class="cat_textbox" id="CAT_Custom_410672" name="CAT_Custom_410672" maxlength="4000" value="0" />
      <li><a href="#" class="small button secondary"><i class="fa fa-minus"><span class="hide">-</span></i></a>
      </li>
    </ul>
  </label>


  <label>
    Infants
    <ul class="button-group button-click">
      <li><a href="#" class="small button secondary"><i class="fa fa-plus"><span class="hide">+</span></i></a>
      </li>
      <input type="text" class="cat_textbox" id="CAT_Custom_410672" name="CAT_Custom_410672" maxlength="4000" value="0" />
      <li><a href="#" class="small button secondary"><i class="fa fa-minus"><span class="hide">-</span></i></a>
      </li>
    </ul>
  </label>
</body>

</html>

I have tried to make it more modular. Not my best attempt but might help JSFiddle

我试着让它更模块化。不是我最好的尝试，但可能会帮助JSFiddle。

#2

You are using the selector ".button-click a" which should be ".button-click > a"

您正在使用选择器。点击“应该”按钮。按钮单击>“

which would denote an a element with an element with the class button-click as a parent

哪个选项表示一个元素，元素的类按钮单击作为父元素

#3

I have added two different classes to the anchor tags and formatted the jQuery to keep things clean and easy.

我在锚标记中添加了两个不同的类，并对jQuery进行了格式化，以保持代码的整洁和简单。

Plnkr Demo:

Plnkr演示:

http://plnkr.co/edit/GqOeRWaaAq8BjeQSVDHc?p=preview

Stack Snippet:

堆栈代码片段:

  $(function() {
  $(".button-click a").on("click", function() {

    var $button = $(this);
    var oldValue = $button.closest("ul").children('input').val();

    if ($button.hasClass('plus')) {
      
      var newVal = parseInt(oldValue) +1;

    } else {
      // Don't allow decrementing below zero
      if (oldValue > 0) {
        var newVal = parseInt(oldValue - 1);
      } else {
        newVal = 0;
      }
    }
    $button.closest("ul").children('input').val(newVal)
    var total_value = 0;
    $(".cat_textbox").each(function(){
      total_value += parseInt($(this).val());
    });
    $(".main").val(total_value);
  })
});

<!DOCTYPE html>
<html>

  <head>
    <script data-require="jquery@3.0.0" data-semver="3.0.0" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.js"></script>
  </head>

  <body>
    <label>
Count all1 Traveller(s)
      <input class="main" value="0" placeholder="" type="text" />
    </label>
    <br />
    <br />
    <label>
Adults
       <ul class="button-group button-click">
        <li>
          <a href="#" class="small button secondary plus">
            <i class="fa fa-plus">
              <span class="hide">+</span>
            </i>
          </a>
        </li>
        <input class="cat_textbox" id="CAT_Custom_410672" name="CAT_Custom_410672" maxlength="4000" value="0" type="text" />
        <li>
          <a href="#" class="small button secondary minus">
            <i class="fa fa-minus">
              <span class="hide">-</span>
            </i>
          </a>
        </li>
      </ul>
    </label>
    <label>
  Children 
         <ul class="button-group button-click">
        <li>
          <a href="#" class="small button secondary plus">
            <i class="fa fa-plus">
              <span class="hide">+</span>
            </i>
          </a>
        </li>
        <input class="cat_textbox" id="CAT_Custom_410672" name="CAT_Custom_410672" maxlength="4000" value="0" type="text" />
        <li>
          <a href="#" class="small button secondary minus">
            <i class="fa fa-minus">
              <span class="hide">-</span>
            </i>
          </a>
        </li>
      </ul>
    </label>
    <label>
   Infants  
         <ul class="button-group button-click">
        <li>
          <a href="#" class="small button secondary plus">
            <i class="fa fa-plus">
              <span class="hide">+</span>
            </i>
          </a>
        </li>
        <input class="cat_textbox" id="CAT_Custom_410672" name="CAT_Custom_410672" maxlength="4000" value="0" type="text" />
        <li>
          <a href="#" class="small button secondary minus">
            <i class="fa fa-minus">
              <span class="hide">-</span>
            </i>
          </a>
        </li>
      </ul>
    </label>
  </body>

</html>

#4

Some older browsers may have issues with <input type="number" why don't you try something like this :

一些较老的浏览器可能会遇到

<html>
<head>
<title>Input Number Incrementer</title>
</head>
<body>
<label>
Count all1 Traveller(s)
<input type="text" class="main" value="0" placeholder="" />
</label>
<br/><br/>
<label>
Adults
 <ul class="button-group button-click">
  <li><a href="#" class="small button secondary"><i class="fa fa-plus"><span class="hide">+</span></i></a></li>
  <input type="text" class="cat_textbox" id="CAT_Custom_410672" name="CAT_Custom_410672" maxlength="4000" value="0" />
  <li><a href="#" class="small button secondary"><i class="fa fa-minus"><span class="hide">-</span></i></a></li>
  </ul>
  </label>
  
  <label>
  Children 
   <ul class="button-group button-click">
  <li><a href="#" class="small button secondary"><i class="fa fa-plus"><span class="hide">+</span></i></a></li>
   <input type="text" class="cat_textbox" id="CAT_Custom_410672" name="CAT_Custom_410672" maxlength="4000" value="0" />
  <li><a href="#" class="small button secondary"><i class="fa fa-minus"><span class="hide">-</span></i></a></li>
  </ul>
  </label>
  
  
    <label>
   Infants  
   <ul class="button-group button-click">
  <li><a href="#" class="small button secondary"><i class="fa fa-plus"><span class="hide">+</span></i></a></li>
   <input type="text" class="cat_textbox" id="CAT_Custom_410672" name="CAT_Custom_410672" maxlength="4000" value="0" />
  <li><a href="#" class="small button secondary"><i class="fa fa-minus"><span class="hide">-</span></i></a></li>
  </ul>
  </label>
  
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
  <script>
      $(function() {
  $(".button-click a").on("click", function() {

    var $button = $(this);
    var input  = $button.closest("ul").find("input");
    var oldValue = parseInt(input.val());
    var newVal = 0;
    var total_value = 0;

    if ($button.text() == "+") {
       newVal = parseInt(oldValue) +1;

    } else {
      // Don't allow decrementing below zero
      if (oldValue > 0) {
         newVal = parseInt(oldValue - 1);
      } else {
        newVal = 0;
      }
    }

    $(input).val(newVal);
    
    $(".cat_textbox").each(function(){
       total_value += parseInt($(this).val());
    });

    $(".main").val(total_value);
  });
});
  </script>
  </body>

</html>

#5

Try This: I have modified your existing function little bit.

试试这个:我已经稍微修改了您的现有函数。

$(function() {
   $(".button-click a").on("click", function() {
   var $button = $(this);
   var mainCount=$('.main').val();
   var bText= $button.text();
   var oldVal=$button.closest("ul").children('input').val();
   var nexVal=null;

   if(bText=='+'){
      nexVal=parseInt(oldVal) +1;
      mainCount=parseInt(mainCount) +1;
   }else{
      nexVal=parseInt(oldVal) -1;
      mainCount=parseInt(mainCount) -1;
   }

  $button.closest("ul").children('input').val(nexVal);
  $('.main').val(mainCount);
  });
});

#1