javascript - 如何在主文本框值中单独显示最终结果

Question

我有一份预订航类表格。这需要统计旅客的数量。我创建了 3 个文本框来统计旅客数量。它效果很好，但问题是我想在文本框中分别显示每个旅行类别的每个计数。例如，当用户添加一名成人时，成人计数会添加到文本框中，或者当添加 child 时，用户可以在一个文本框中看到结果。但我的代码返回总值(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.11.1/jquery.min.js"></script>
<label>
Count all1 Traveller(s)
<input type="text" name="no_travellers" class="main" value="1 adult + 2 child + 1 infant" 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>

Answer 1

这是您要找的吗？我稍微缩短了代码。我将 label 文本包裹在一个范围内以正确选择它们。

编辑:因此，total input field 中的字符串是动态的，因为它使用 label 标记中的字符串。

编辑2:添加了默认值。

这是一个工作 fiddle :

$(function() {
  $(".button-click a").on("click", function() {
    var button = $(this);
    var oldVal = parseInt(button.closest("ul").prev().val());
    var newVal = (button.text() == "+") ? oldVal+1: (oldVal > 0) ? oldVal-1 : 0;
    var total_value = "";
    
    button.closest("ul").prev().val(newVal);

    $(".cat_textbox").each(function(){
      var cat = $(this).prev('span').text();
      total_value += cat + ": " + $(this).val() + ", "; 
    });
    
    total_value = total_value.substring(0, total_value.length - 2);
    $(".main").val(total_value);
  })
});

.main{
  width:200px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<label>
Count all1 Traveller(s)
<input type="text" name="no_travellers" class="main" value="Adults: 1" placeholder="" />
</label>
<br/><br/>
<label>
<span>Adults</span>
<input type="text" class="cat_textbox" id="CAT_Custom_410672" name="CAT_Custom_410672" maxlength="4000" value="1" />
 <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>
  <span>Children</span>
  <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>
   <span>Infants</span>
    <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>