Javascript 获取数据目标'；s值动态失败

我正在尝试使用类方法动态地获取数据目标。我之所以这样做，是因为我目前有一个工作代码段，我想重构它。我的工作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">

但我发现了一个错误：“UncaughtTypeError:无法读取未定义的属性'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>

计算

代码中的问题是因为

如果
语句不更改范围，则该
将把
#calculate
元素称为
，函数会更改范围。要解决这个问题，您需要选择元素并直接使用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;
  });
});

你能看看这个代码是否支持你的问题吗。在我看来很有希望


$（文档）.ready（函数（）{
$（“#计算”）。单击（函数（）{
var-tot=0；
$（'：输入[type=“number”]”）。每个（函数（）{
如果（$（this）.val（）！=0）{
如果（$（“[data target='#“+$（this.attr（“id”）+“]”）”）是（':checked'））{
var target=“#”+$（this.attr（“id”）；
var sub=parseInt（parseInt（$（“[data target='”+target+“]”）”）.val（））*parseInt（$（target.val（））| 0；
tot+=sub；
}
}
});
控制台日志（tot）；
});
});

计算
Rory，您注意到我的“this”不是指我需要的元素（因为if不改变范围，但函数改变范围），这帮助我找到了正确的答案：

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

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

您在什么事件下运行代码？此
引用什么？您正在使用哪个事件..来执行此
$（'.checkbox countable'）。更改（fn）；
和
$（'.checkbox countable:checked'）。每个（fn）
…将对您有所帮助。您的计算器无效。如果您输入10，您将得到10.10*10，但它应该适用于例如#i11 value*inputed number，如果数字为10，则应为18*10=180。此外，请记住，解决方案必须使用问题中声明的多个输入，而不仅仅是一个。现在请查看代码。将执行以下操作：通用版本很快就会出现。它现在只需一个输入就可以完成任务，但是为什么要使用正则表达式进行数字匹配呢“解决了这个问题。我还没有尝试过我的原始代码，它有多个输入，但可能不会尝试，因为我已经找到了一个工作的解决方案，对我来说似乎是有效和干净的。Inuka，我感谢你的努力，though@Mkey实现了Rory的建议。非常欢迎您尝试。即使您没有选中第二个复选框，也会有一个小小的回退，它会在
标记中获取值。很快就会纠正。Rory您的代码可以工作，但仅适用于第一个元素（例如，适用于#i10，但不适用于#i11，#i12…）。另外，如果您将.val（）添加到$checkboxMy的原始代码假设您只有一个复选框，请记住这一点。如果有多个，则需要循环。见我的最新答案谢谢，这很有效。但不确定选择哪一个作为正确答案：）
   $('.checkbox-countable').each(function(){
                    if ($('.checkbox-countable').is(':checked')) {

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