javascript - 如何根据所选元素重置 jQuery 变量？

Question

我创建了一个 HTML 规则，允许用户选择一个单元格并将获得的分数与可能的分数相加。现在，我有一个函数只允许选择每行一个 td 。选择一个单元格后，它会将这些点添加到一个变量中。问题是，当我更改行的选择时，它只是将新选择添加到变量之上，而不是减去和替换值。

例如，如果我选择了 8 点，但将其更改为 6，而不是变量值是 6，它会将 6 添加到 8。

我要加点的函数如下:

jQuery('#ldrm-rubric-loaded td.choice').click(function () {
    // Obtain points earned
    var ndx = jQuery(this).index() + 1;
    var target = jQuery('#ldrm-rubric-loaded thead tr.points th:nth-child('+ndx+')').html();
    if(!isNaN(target) && target.length != 0) {
        pointsEarned += parseFloat(target);
    }
    jQuery('#ldrm-points-earned').html('Points Earned: '+pointsEarned);
    alert(pointsEarned);
});

http://jsfiddle.net/f6u2pjgu/1/

关于如何更改函数以替换值而不是添加值，有什么想法吗？

Answer 1

我认为如果你使用像这样的单个处理程序会更容易

var total = 0,
    $headers = jQuery('#ldrm-rubric-loaded thead tr.points th');
jQuery('#ldrm-rubric-loaded td.choice').click(function () {
    var $this = jQuery(this),
        $prev;
    if (!$this.hasClass('selected')) {
        $prev = $(this).siblings('.selected').removeClass('selected');

        if ($prev.length) {
            total -= +$headers.eq($prev.index()).html() || 0;
        }
        total += +$headers.eq($this.index()).html() || 0;

        $this.addClass('selected');
        jQuery(this).siblings().removeClass('selected');
        var trackChanges = jQuery('#ldrm-rubric-loaded').clone().html();
        jQuery('#ldrm_assignment_content').val(trackChanges);


        jQuery('#ldrm-points-earned').html('Points Earned: ' + total);
        alert(total);
    } //else don't do anything since it is already selected

});

演示:Fiddle

---

如果你想保留你的代码结构

jQuery('#ldrm-rubric-loaded td.choice').click(function () {
    var $this = jQuery(this),
        $tr = $this.closest('tr'),
        prevValue = $tr.data('selected') || 0;

    // Obtain points earned
    var ndx = $this.index() + 1;
    var value = +jQuery('#ldrm-rubric-loaded thead tr.points th:nth-child(' + ndx + ')').html() || 0;
    pointsEarned -= prevValue;
    pointsEarned += value;

    $tr.data('selected', value)
    jQuery('#ldrm-points-earned').html('Points Earned: ' + pointsEarned);
    alert(pointsEarned);
});

演示:Fiddle