メインテキストボックスの値で最終結果を個別に表示する方法

Question

私は予約フライトフォームを持っています。それは旅行者の数を取る。私は3つのテキストボックスを作成して旅行者数を得ました。それはうまくいきますが、問題は、テキストボックスに旅行の各カテゴリの各カウントを別々に表示したいということです。たとえば、ユーザーが大人を追加すると、大人の数がテキストボックスに追加されます。または、子供がユーザーを追加したときに、1つのテキストボックスに結果が表示されます。私のコードは総価値を返す。私のコードを変更するには？ここ は私の抜粋です：

$(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のテキストを適切に選択するためにスパンでラップしました。

EDIT：それはあなたのlabelタグ内の文字列を使用しているため、だからあなたtotal input field内の文字列は動的です。

EDIT2：デフォルト値が追加されました。あなたが実際にここで必要なものを出力

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