テキストボックスの値を減らしたり、大きくするにはどうすればいいですか？

私は旅行者の数を入力する予約フライトフォームを持っています。大人用、子供用、幼児用の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); 
 
    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>

出典

2016-10-22 Anonymous

マークアップは、 ''

無効です。そして、 '$ button.closest（" ul "）prev（）;'は何も見つからないでしょう：[.prev（）]（https://api.jquery.com/prev/） – Andreas

どうすれば変更できますか？ PLZ？ –

それは固定マークアップに依存します – Andreas

あなたは+と-のための2つの異なるハンドラを持っていると私はそれがよりモジュラー作るしようとしてい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>

使用して入力を検索することができます。私の最善の試みではありませんが、助けてくれるかもしれません。JSFiddle

出典

2016-10-22 07:49:39 Rajesh

ありがとうございました –

@stackbaz私は少しモジュラー化しようとしました。はい、それは最善のアプローチではありませんが、あなたはそれを参照元として考えることができます。 ** [JSFiddle]（https://jsfiddle.net/RajeshDixit/sapv9hsn/）** – Rajesh

あなたがクラスを持つ要素でa要素を表します".button-click > a"

でなければなりませんセレクタ".button-click a"を使用しているbutton-click親として

出典

2016-10-22 07:38:00 mike510a

いいえ、私は入力番号で値を変更したくありません。私が書いたプラスとマイナスでテキストボックスの値を変更したいと思います。 –

アンカータグに2つの異なるクラスを追加し、jQueryを整理してクリーンで簡単にしました。

Plnkrデモ：

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

スタックスニペット：

$(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="[email protected]" 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>

出典

2016-10-22 07:53:15

古いブラウザでは、と問題が発生する可能性がありこれを試してみてください

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

出典

2016-10-22 07:57:24

：私はあなたの既存の関数を少し変更した3210は、なぜこのような何かをしようとしないでください。

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

出典

2016-10-22 08:16:02

テキストボックスの値を減らしたり、大きくするにはどうすればいいですか？

答えて

関連する問題