クリック時の複数項目のインクリメント

これはJavaScriptを初めて使用したときです.HTML、CSS、JavaScriptを統合するのは苦労しています。クリック時の複数項目のインクリメント

HTML

<body> 
<table> 
    <tr> 
    <td>Shirt</td> 
    <td>2$</td> 
    <td> 
     <form id='shirt' method='POST' action='' > 
     <input type='button' value='-' class='qtyminus' field='shirt_count' /> 
     <input type='text' name='shirt_count' value='0' class='qty' readonly="readonly"/> 
     <input type='button' value='+' class='qtyplus' field='shirt_count' /> 
     </form> 
    </td> 
    </tr> 
    <tr> 
    <td>Suit</td> 
    <td>3$</td> 
    <td> 
     <form id='suit' method='POST' action='#' > 
     <input type='button' value='-' class='qtyminus' field='suit_count' /> 
     <input type='text' name='suit_count' value='0' class='qty' readonly="readonly"/> 
     <input type='button' value='+' class='qtyplus' field='suit_count' /> 
     </form> 
    </td> 
    </tr> 
</table> 

    <h4> 
    Total items: <span id="displayCount">0</span> 
    <p> 
    Total price: <span id="displayCount">0</span> 
    </h4> 
</body>

を

jQuery(document).ready(function(){ 
    $('.qtyplus').click(function(e){ 
     e.preventDefault(); 
     fieldName = $(this).attr('field'); 
     var currentVal = parseInt($('input[name='+fieldName+']').val()); 
     if (currentVal == 10) { 
      $('input[name='+fieldName+']').val(currentVal); 
     } 
     else if (!isNaN(currentVal)) { 
      $('input[name='+fieldName+']').val(currentVal + 1); 
     } 
     else { 
      $('input[name='+fieldName+']').val(0); 
     } 
    }); 

    $('.qtyminus').click(function(e) { 
     e.preventDefault(); 
     fieldName = $(this).attr('field'); 
     var currentVal = parseInt($('input[name='+fieldName+']').val()); 
     if (!isNaN(currentVal) && currentVal > 0) { 
      $('input[name='+fieldName+']').val(currentVal - 1); 
     } else { 
      $('input[name='+fieldName+']').val(0); 
     } 
    }); 
});

JavaScriptの

：ここに示したように私は/増加ボタンをクリックすることにより、製品の数を減らすことができますプログラム（多くの助けを借りて）書きましたまた、ここで見ることができます： http://jsfiddle.net/51ob29sL/

しかし、問題は、ボタンをクリックすると、「合計アイテム」が増減することです。 1クリックで2つの関数を呼び出す方法はありますか？

また、「合計価格」の部分では、商品の価格を変数に追加したいと考えています。アイテムごとにオブジェクトを作成する必要があるかもしれないが、そうしようとしなかったような気がする。

ご意見やご感想をお寄せください。

出典

2016-06-14 Sang yeop Jung

'document''でid'は、あなたが最初のテキストボックスであることを使用して、セカンドシングルラベルで何でも両方のタグでユニーク – guest271314

セットテキストでなければなりません;-)最初にそれを見ずにやってみてください関数 – damon

が

:-)スタックオーバーフローへようこそあなたは否決避けるために、独自の質問をする前に、スタックオーバーフローを検索していることを確認してください...

としては、ここで答えました。..あなたも呼び出すことによって、クリックして別の機能を追加することができます。jQuery - Append an event handler to preexisting click event

...

$('.qtyminus').click(function(e) { 
    // Function code here 
})

しかし、あなただけの...（価格spanの仮定idがdisplayCountを重複しないdisplayPriceである）、

function updateItemsAndPrice() { 
    var suits = parseInt($('input[name=suit_count]').val()), 
     shirts = parseInt($('input[name=shirt_count]').val()); 
    $('#displayCount').html(suits + shirts) 
    $('#displayPrice').html(suits * 3 + shirts * 2) 
}

をこのような何かをあなたはそれが何をしたいん関数を作成し、同じでそれを呼び出すことができますイベントハンドラを最下部に追加して、値の更新後に値段と合計アイテムが再計算されるようにします。

$('.qtyplus').click(function(e){ 
    // Your other code 
    updateItemsAndPrice(); 
}); 

$('.qtyminus').click(function(e) { 
    // Your other code 
    updateItemsAndPrice(); 
});

ここではフィドラーですしかし

http://jsfiddle.net/51ob29sL/4/

出典

2016-06-14 13:00:43 shramee

これは最初はあなたの頭を包み込むのが難しいかもしれませんが（あなたはJS初心者です）、重複はありません... – shramee

各機能の最後にコードを貼り付けると、 2つの場所に同じコードが存在するので、デバッグ – shramee

@ guest271314と同様に、は一意である必要があります。幸運にも、あなたはそのルールを破る一つのインスタンスしか持っていませんでした。ここで

は、各click機能の下に追加するために必要なものです：

var shirts = parseInt($("input[name='shirt_count']").val()); 
var shirtsPrice = shirts * 2; 
var suits = parseInt($("input[name='suit_count']").val()); 
var suitsPrice = suits * 3; 
$("#displayCountItems").text(shirts + suits); 
$("#displayCountPrice").text(shirtsPrice + suitsPrice);

はを掛け、
がそれぞれから値を取得し、それらを表示し、それらを追加、それぞれから値を取得します。
```
Total items: <span id="displayCountItems">0</span> 
Total price: <span id="displayCountPrice">0</span> 
```
：価格、それらを

変更IDを表示

フィドル：http://jsfiddle.net/51ob29sL/2/

出典

2016-06-14 12:57:07 theblindprophet

クリック時の複数項目のインクリメント

答えて

関連する問題