Question

这是我第一次使用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>

的JavaScript

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

此处也可以看到：GALocalStroage

但问题是，我想要的是＆＃39;总项目＆＃39;单击按钮增加/减少。有没有办法在1次点击时调用2个函数？

此外，总价格为＆＃39;部分，我想添加项目＆＃39;相应的价格变成了变量。我觉得我可能需要为每个项目创建一个对象，但没有尝试这样做。

任何帮助或提示都将不胜感激。

Answer 1

正如@ guest271314所说，ids 必须是唯一的。幸运的是，你只有一个打破这条规则的例子。

以下是您需要添加到每个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);

从每个值中获取值，添加它们，显示它们
从每个值中获取值，乘以价格，显示它们

更改了ID：

Total items: <span id="displayCountItems">0</span>
Total price: <span id="displayCountPrice">0</span>

小提琴：http://jsfiddle.net/51ob29sL/2/

Answer 2

欢迎使用堆栈溢出： - ）

请确保在询问自己的问题之前搜索堆栈溢出，以避免被投票...

在这里回答...... jQuery - Append an event handler to preexisting click event

即使通过调用...

，您也可以添加其他功能

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

但你可以创建一个能做你想做的事情的功能，比如这样（假设价格为span的{{1}} displayPrice不重复displayCount）...... < / p>

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/

点击时增加多个项目

2 个答案: