Question

这是我的小提琴：

HTML：

<ul>
  <li id="1">
    <input type="text" name="1" class="parent" />
    <input type="hidden" name="rank" value="8" class="rank" />
    <span class="result"></span>
  </li>
  <li id="2">
    <input type="text" name="2" class="parent" />
    <input type="hidden" name="rank" value="1.75" class="rank" />
    <span class="result"></span>
  </li>
  <li id="3">
    <input type="text" name="1" class="parent" />
    <input type="hidden" name="rank" value="10" class="rank" />
    <span class="result"></span>
  </li>
</ul>

JS：

$(document).on("change", ".parent", function() {
  var sum = 0;
  $(".parent").each(function() {
    var rank = $("input").next(".rank").val();
    sum = $(this).val() * rank;
  });
  $("input").next(".result").val(sum);
});

我有服务器端生成的列表，我需要将输入值.parent * .rank相乘并将结果放入每个<li>的span.result中。我试图使用.closest ()和.next()函数，但无法正常工作。

谢谢您的帮助！

Answer 1

从OP中了解到.result是span，所以$("input").next(".result").val(sum);不起作用，因为span没有使用.val()的功能改为.text()。还要更改

 var rank = $("input").next(".rank").val();

到

var rank = $(this).next(".rank").val();

DEMO HERE

编辑

基于OP的评论。试试这个

$(document).on("change", ".parent", function() {
    var sum = 0;
    $(".parent").each(function() {
        var rank = $(this).next(".rank").val();
        sum = $(this).val() * rank;
        $(this).parent().find(".result").text(sum);
    });

});

UPDATED DEMO

Answer 2

您尝试过

var rank = $(this).siblings(".rank").val();

$(this).siblings(".result").val(sum);

将输入值乘以跨度

2 个答案: