获取数据目标的值动态失败
获取数据目标的值动态失败
提问于 2017-03-03 11:07:27
我试图使用类方法动态地获取数据目标。我之所以这么做是因为我目前有一个工作代码片段，我想重构它。我的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;
}但我犯了一个错误：“未定义的TypeError:无法读取属性'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>回答 3
Stack Overflow用户
回答已采纳
发布于 2017-03-03 11:20:39
代码中的问题是，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;
});
});Stack Overflow用户
发布于 2017-03-03 12:32:01
你能看看这段代码是否支持你的问题吗。在我看来很有前途。
$(document).ready(function() {
$("#calculate").click(function() {
var tot = 0;
$(':input[type="number"]').each(function() {
if ($(this).val() != 0) {
if ($("[data-target='#" + $(this).attr("id") + "']").is(':checked')) {
var target = "#" + $(this).attr("id");
var sub = parseInt(parseInt($("[data-target='" + target + "']").val())) * parseInt($(target).val()) || 0;
tot += sub;
}
}
});
console.log(tot);
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<input id="i11" class="checkbox-countable" type="checkbox" data-target='#window10' value="18 Yes">
<input type="number" id="window10">
<input id="i10" class="checkbox-countable" type="checkbox" data-target='#window11' value="19 Yes">
<input type="number" id="window11">
<button id="calculate">Calculate</button>
Change：支持多个复选框选择+智能复选框检测。
Stack Overflow用户
发布于 2017-03-03 13:23:23
Rory，您注意到我的“this”指的不是我需要的元素(因为如果不更改范围，但函数可以)，这帮助我找到了正确的答案：
$('.checkbox-countable').each(function(){
if ($('.checkbox-countable').is(':checked')) {
var target = $(this).data("target");
tot += parseInt($(this).val()) * parseInt($(target).val()) || 0;
}
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/42577266
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号