我正在尝试使用类方法动态获取数据目标。我这样做的原因是因为我目前有一个我想重构的工作代码片段。我的工作 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>
最佳答案
您的代码中的问题是因为 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;
});
});
关于javascript - 动态获取数据目标的值失败,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42577266/