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;
}

但我发出错误：“未捕获的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>

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;
  });
});

Answer 2

您能否看到此代码是否支持您的问题。看起来很有希望。

$(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>

<强>更改：支持多个复选框选择+智能复选框检测。

Answer 3

Rory，你注意到我的'this'指的不是我需要的元素（因为如果不改变范围，但功能确实如此）帮助我提出了正确的答案：

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

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

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

3 个答案: