Question

我编写了一个jQuery函数来计算动态div的总和。当我直接在事件处理程序中执行函数时，它工作正常：

$(document).on('keyup', '.priceText:not(:last)', function() {
var total = 0;
$(this).each(function() {
        if ((this.value) != '') {
            total += parseFloat(this.value);
        }
    }
)
if (isNaN(total) == false) {
    $('#total-price').html(total);
}
else {
    total = 0;
}
});

但是，如果我尝试通过调用来运行相同的功能，它将无法正常运行：

function calcTotal(pricesToAdd, divToUpdate) {
var total = 0;
$(pricesToAdd).each(function() {
        if ((pricesToAdd.value) != '') {
            total += parseFloat(pricesToAdd.value);
        }
    }
)
if (isNaN(total) == false) {
    $(divToUpdate).html(total);
}
else {
    total = 0;
}
}

$(document).on('keyup', '.priceText:not(:last)', function() {
calcTotal(this, '#total-price');
});

我错过了什么吗？

Answer 1

你有2个问题

这一行：calcTotal(this, '#total-price');。在此上下文中，this是触发keyup事件的元素，而不是'.priceText:not(:last)'匹配的集合。更改您的代码以传递整个集合，如下所示：calcTotal($('.priceText:not(:last)'), $('#total-price'));
这一位$(pricesToAdd).each(function() { if ((pricesToAdd.value) != '')你试图循环一个集合但是在循环内你再次引用该集合而不是当前索引处的对象。

另外，我会将对象本身传递给函数而不仅仅是选择器，只是我的偏好。

以下是一个例子：

＆＃13;

function calcTotal(pricesToAdd, divToUpdate) {
    var total = 0;
    pricesToAdd.each(function (e,thisPrice) { // reference the element you iterate
        if ((thisPrice.value) != '') { // work with the current price
            total += parseFloat(thisPrice.value);
        }
    })
    if (isNaN(total) == false) {
       divToUpdate.html(total);
    } else {
        total = 0; 
    }
}

$(document).on('keyup', '.priceText:not(:last)', function () {
    // calcTotal(this, '#total-price'); // this was only sending the clicked element not the collection
     calcTotal($('.priceText:not(:last)'), $('#total-price')); // Pass the whole matched collection instead
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" class="priceText">
<br>
<input type="text" class="priceText">
<br>
<input type="text" class="priceText">
<br>
<input type="text" class="priceText">
<span id="total-price"></span>

＆＃13;

Answer 2

$(document).on('keyup', '.priceText:not(:last)', function() {
    calcTotal(this, '#total-price');
});

this应为$(this) 尝试调用函数calcTotal（）而不是添加匿名来调用另一个函数：

$(document).on('keyup', '.priceText:not(:last)', calcTotal($(this), '#total-price'));

假设该功能正常工作，这应该可行。

编辑：如果不起作用：

$(document).on('keyup', '.priceText:not(:last)', function() {
    calcTotal($(this), '#total-price');
});

调用时，jQuery中的函数不再有效

2 个答案:

以下是一个例子：