1

マイナスボタンをクリックするとテキストボックス内の値が減少し、プラスボタンをクリックするとテキストボックス内の値が増加します。JSONを取り込んで自動的に入力するjQueryテンプレートを使用しています。

<script id="template" type="text/x-jquery-tmpl">
   <div style="display:block;" id="${getNextId()}">
     <div class="adjuster">
       <button id='minusbutton'>-</button>
       <input id='quantityText' class="enterQuantity" type=text 
             style="width:40px; margin-left:5px;margin-right:5px" />
       <button id='plusbutton'>+</buton>
     </div> 
     <div class="productName">
       <div>${productname}</div>
     </div>
     <div class="quantity">
         <span style="font-weight:bold;">${quantity}</span>
         <span> Remaining</span>
     </div>
   </div>
</script>

マークアップのボタンに onclick イベントを追加すると、どのように目標を達成できますか?

4

1 に答える 1

0

簡単な実装を次に示します: http://jsfiddle.net/GAfyW/4/

HTML:

<div id="plusOne">Click to Increment</div>
<div id="minusOne">Click to Decrement</div>
<span type="text" id="valueContainer"/>0</span>

onload ブロック内に配置された JS:

$('#plusOne').bind('click', function() {
  var value = $('#valueContainer').html();
  // Increment the value
  $('#valueContainer').html(parseInt(value)+1);
});

$('#minusOne').bind('click', function() {
  var value = $('#valueContainer').html();
  // Decrement the value
  $('#valueContainer').html(parseInt(value) - 1);
});

ここに：

  • 'plusOne' = 'plusButton';
  • 'minusOne' = 'minusButton';
  • 'valueContainer' = 数量を格納するために使用したスパン。
于 2012-04-13T20:59:24.493 に答える