我有一张机票预订单。这需要旅行者的数量。我创建了3个文本框来记录旅行者的号码。它工作得很好,但问题是当用户增加或减少每个文本框中的旅行者数量时,我想同时显示主文本框中所有3个文本框的计数。我该怎么做?这是我的片段:

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

})
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<html>
<head>
<title>Input Number Incrementer</title>
</head>
<body>
<label>
Count all1 Traveller(s)
<input type="text" class="main" value="1" placeholder="" />
</label>
<br/><br/>
<label>
Adults
<input type="text" class="cat_textbox" id="CAT_Custom_410672" name="CAT_Custom_410672" maxlength="4000" value="0" />
 <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>
  <li><a href="#" class="small button secondary"><i class="fa fa-minus"><span class="hide">-</span></i></a></li>
  </ul>
  </label>

  <label>
  Children
  <input type="text" class="cat_textbox" id="CAT_Custom_410672" name="CAT_Custom_410672" maxlength="4000" value="0" />
   <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>
  <li><a href="#" class="small button secondary"><i class="fa fa-minus"><span class="hide">-</span></i></a></li>
  </ul>
  </label>


    <label>
   Infants
    <input type="text" class="cat_textbox" id="CAT_Custom_410672" name="CAT_Custom_410672" maxlength="4000" value="0" />
   <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>
  <li><a href="#" class="small button secondary"><i class="fa fa-minus"><span class="hide">-</span></i></a></li>
  </ul>
  </label>


  </body>

</html>

  

最佳答案

在button中,单击event在所有traveler文本框中迭代每个循环以获取travelers号码,并添加乘客以计算总乘客数,并将其放置在主文本框中。

//Place a hidden field in the form
<input type="hidden" name="hidden_travelers" id="hidden_travelers">

//place this code in button click event
var total_value = 0;
$(".cat_textbox").each(function(){
  total_value += parseInt($(this).val());
});
$(".main").val(total_value);
//Assign total travelers to the hidden field
$("#hidden_travelers").val(total_value);

请检查工作片段以获得更多理解。
$(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);

    //Calculate total travellers from all traveller textbox.
    var total_value = 0;
    //Loop through all the traveller textboxes
    $(".cat_textbox").each(function(){
      //Make addition of travellers from all the three textboxes
      total_value += parseInt($(this).val());
    });
    //Assign the total traveller number to main textbox
    $(".main").val(total_value);
  })
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<html>
<head>
<title>Input Number Incrementer</title>
</head>
<body>
<label>
Count all1 Traveller(s)
<input type="text" name="no_travellers" class="main" value="0" placeholder="" />
</label>
<br/><br/>
<label>
Adults
<input type="text" class="cat_textbox" id="CAT_Custom_410672" name="CAT_Custom_410672" maxlength="4000" value="0" />
 <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>
  <li><a href="#" class="small button secondary"><i class="fa fa-minus"><span class="hide">-</span></i></a></li>
  </ul>
  </label>

  <label>
  Children
  <input type="text" class="cat_textbox" id="CAT_Custom_410672" name="CAT_Custom_410672" maxlength="4000" value="0" />
   <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>
  <li><a href="#" class="small button secondary"><i class="fa fa-minus"><span class="hide">-</span></i></a></li>
  </ul>
  </label>


    <label>
   Infants
    <input type="text" class="cat_textbox" id="CAT_Custom_410672" name="CAT_Custom_410672" maxlength="4000" value="0" />
   <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>
  <li><a href="#" class="small button secondary"><i class="fa fa-minus"><span class="hide">-</span></i></a></li>
  </ul>
  </label>


  </body>

</html>

关于javascript - 如何在主文本框值中显示最终结果,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/40189118/

10-12 12:58
查看更多