Question

（我正在简化我的桌子但是）我有一张桌子，其中每一行都有一个开/关按钮（id =＆＃39; b1＆＃39;）和一个价格列（在html div中预设的金额，class =＆＃39;加上＆＃39）;现在表格中有四个价格，但可能需要或多或少地编码。在表格的最后一行，最后一行有一个总单元格，div中所有的数字加上类名加上总计显示。

我的问题是，当价格旁边的开关按钮发生变化时，我需要能够反映总数的变化。（如果它已经关闭，那么价格不应该包含在总数中，如果它已经开启，那么应该是。）

这是我写过的函数，但它不起作用：

$('#b1').click(function (){
    console.log('test'); 

        if(('#b1').val('OFF')){
           $(this).closest('td').children('div.plus').val(0); 
        } else if(('#b1').val('ON')){
            // do nothing
            console.log('do nothing');
        }
    });

这是两行的html：

<tr class="ui-state-default">
                            <td>Additional One</td>
                            <td>
                                <a href="#" class="multiple sub location" data-type="text" data-pk="1" data-title="Enter username">Additional One</a>
                            </td>
                            <td>
                                <form action="">
                                    <input type="button" class='secondA' id="b1" value="ON">
                                </form>
                            </td>
                            <td>$</td>
                            <td><div class='plus'>9.99</div></td>
                            <td><input type="number" class="minus" value=""/></td>
                        </tr>
                        <tr class="ui-state-default">
                            <td>Additional Two</td>
                            <td>
                                <a href="#" class="multiple sub location" data-type="text" data-pk="1" data-title="Enter username">Additional Two</a>
                            </td>
                            <td>
                                <form action="">
                                    <input type="button" class='secondA' id="b1" value="ON">
                                </form>
                            </td>
                            <td>$</td>
                            <td><div class='plus'>8.99</div></td>
                            <td><input type="number" class="minus" value=""/></td>
                        </tr>

Answer 1

首先，您不应该使用相同的id=""属性两次。但是，按钮类会这样做。试试这个：

要显示总和，请在表格中添加一行

<tr>
  <td class="total"></td>
</tr>

然后详细说明你的点击功能：

$(function(){

  var sum = $('.total');
  var product = $('.ui-state-default');
  var button = $('.ui-state-default input[type="button"]');

  $(button).on('click', function() {
    var total = 0;
    if ($(this).attr('value') == 'OFF') {
      $(this).attr('value', 'ON');
    } else {
      $(this).attr('value', 'OFF');
    }
    button.each(function(){
      if ($(this).attr('value') == 'ON') {
        total += parseFloat($(this).parents('tr').find('.plus').text());  
      }
    });
    sum.text(total);
  });
});

1）初始化你的总数。

2）处理按钮的值。

3）遍历您的行，使用parseFloat(StringValue)汇总总价。

也许您会在使用其他<input>调整数量时弄清楚如何更改总和。这是fiddle。

通过转动输入按钮On＆amp; amp;来调整Div的总和。离

1 个答案: