javascript - 动态获取数据目标的值失败

Question

我正在尝试使用类方法动态获取数据目标。我这样做的原因是因为我目前有一个我想重构的工作代码片段。我的工作 JS 代码如下所示:

if ($('#i10').is(':checked')) {

    tot += parseInt($('#i10').val()) * parseInt($('#window10').val()) || 0;
}
if ($('#i11').is(':checked')) {

    tot += parseInt($('#i11').val()) * parseInt($('#window11').val()) || 0;
}
if ($('#i12').is(':checked')) {

    tot += parseInt($('#i12').val()) * parseInt($('#window12').val()) || 0;
}
if ($('#i13').is(':checked')) {

    tot += parseInt($('#i13').val()) * parseInt($('#window13').val()) || 0;
}

HTML 示例:

<input id="i10" class="checkbox-countable" type="checkbox" data-target='#window10' value="18 Yes">
<input type="number"  id="window10">

我是如何尝试重构我的代码的:

if ($('.checkbox-countable').is(':checked')) {

    var target = $(this).data("target");
    tot += parseInt($(this).val()) * parseInt(target.val()) || 0;
}

但我遇到了一个错误:“未捕获的类型错误:无法读取未定义的属性‘val’”

关于如何解决这个问题或我可能在哪里犯了错误的任何建议？

编辑:我正在运行这个:

$(document).ready(function() {
    $("#calculate").click(function() {
            if ($('.checkbox-countable').is(':checked')) {

                var target = $(this).data("target");
                tot += parseInt($(this).val()) * parseInt(target.val()) || 0;
            }

        }
    });
});

HTML:

 <button id="calculate">Calculate</button>

Answer 1

您的代码中的问题是因为 this 将引用 #calculate 元素作为 if 语句不会更改范围 - 函数做。要解决此问题，您需要选择元素并直接使用该 jQuery 对象。此外，您需要将 target 变量包装在一个 jQuery 对象中。现在 target 是一个字符串，因此是您看到的错误。试试这个:

$("#calculate").click(function () {
  $('.checkbox-countable:checked').each(function() {
    var $checkbox = $(this);
    var $target = $($checkbox.data("target"));
    tot += (parseInt($checkbox.val(), 10) * parseInt($target.val())) || 0;
  });
});