将输入值乘以跨度

Posted 2023-02-25

【中文标题】将输入值乘以跨度

【英文标题】：Multiply input values into span

【发布时间】：2018-11-23 08:10:52

【问题描述】：

这是我的小提琴：

http://jsfiddle.net/19gwk4q6/

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() 函数，但它不起作用。

感谢您的帮助！

【问题讨论】：

在标签跨度中，您必须为其使用函数文本集值。 $("输入").next(".result").val(sum); ---> $("input").next(".result").text(sum);

【参考方案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

【讨论】：

感谢您的回答！它仍然无法正常工作。当我将某个值设置为一个输入时，它会在所有结果范围中返回 0。

你期望的输出是什么？

示例：当我将 10 设置为 将乘以值 ，这意味着它返回 80 到

中的

【参考方案2】：

你试过了吗

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

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