jQuery 中的函数在调用时不再起作用

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

$(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');
});

Answer 2

您有 2 个问题

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

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

这是一个例子：

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

<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>

jQuery 中的函数在调用时不再起作用

Function in jQuery no longer works when called

jquery

function

calling-convention

这是一个例子：