jquery单击并计算更多输入答案

【问题标题】：jquery click and calculation on more inputjquery单击并计算更多输入
【发布时间】：2012-12-29 20:00:01
【问题描述】：

我是 Jquery 的新手：

我有一个点击功能和一个更改功能：似乎更改功能“停止”了点击功能的工作：

$(".calc").click(function() {


    for (i = 1; i <= 2; i++) {

        $("#p" + i).val(parseFloat((parseFloat($("#amount" + i).val())) / (parseFloat($("#q" + i).val()))).toFixed(5)).change();


    }

});

$('.priceRow').change(function() {

    var q1 = parseFloat($('#q1').val(), 10);
    var qval1 = 0;
    if (q1 > 0) {
        qval1 = q1;
    }

    var q2 = parseFloat($('#q2').val(), 10);
    var qval2 = 0;
    if (q2 > 0) {
        qval2 = q2;
    }

    var p1 = parseFloat($('#p1').val(), 10);
    var puval1;
    if (p1 > 0) {
        puval1 = p1;
    }
    var p2 = parseFloat($('#p2').val(), 10);
    var puval2 = 0;
    if (p2 > 0) {
        puval2 = p2;
    }

    var subtot1;

    subtot1 = parseFloat(qval1 * puval1);

    var subtot2;
    subtot2 = parseFloat(qval2 * puval2);
    var subtot = 0;

    $('#amount1').val(parseFloat(subtot1).toFixed(2)).change();
  //  $('#amount2').val(parseFloat(subtot2).toFixed(2)).change();


});

});

html代码

<div class="priceRow">
q1 : <input id="q1" value="0" class="priceRow"/>
p1 : <input id="p1" value="0" class="priceRow"/>
<a href="#" id="calc2" class="calc">calc</a>
</div>
<div class="priceRow">
 q2 :  <input id="q2" value="0"/>
 p2 :  <input id="p2" value="0" />
<a href="#" id="calc2" class="calc">calc</a> 
</div>
<br>
amount1: <input id="amount1" class="subtot">  </span><br>
amount2: <input id="amount2" class="subtot">  </span><br>
</p>

点击功能在第二行不起作用：我的错误是什么？？？

非常感谢

演示：http://jsfiddle.net/skipperit/mCnqH/3/

【问题讨论】：

标签： jquery click onchange

【解决方案1】：

我建议你从头开始。

ID 不能在页面中重复。你应该改用类。

要仅使用 row 中的元素，您希望使用 closest() 遍历该行的主父级并使用 find() 仅查找该行中的元素

例子：

$(".calc").click(function(){
   /* "this" is the current element clciked*/

    var $row= $(this).closest( '.priceRow')
     var q1=$row.find('.q1');/* note using class="q1" not ID*/
});

change 事件仅发生在表单输入上，因此您的 $('.priceRow').change 永远不会触发

【讨论】：

【解决方案2】：

我认为您想要的是将更改事件处理程序附加到价格行中的文本框。 div 上的更改事件充其量是不确定的。尝试将您的更改事件附件更新为以下内容。

$('.priceRow input:text').change(...);

【讨论】：

【解决方案3】：

添加

class="priceRow"

到您具有 id p2 和 q2 的输入字段。目前只有 p1 和 q1 有这个

http://jsfiddle.net/mCnqH/5/

【讨论】：