Question

我是jQuery的初学者，需要弄清楚当另一个字段被更改时如何自动更新一个字段。我输入字段更改后的代码，但我不知道如何查找（和更改）相应的字段。这是一个jsFiddle

HTML：

<div>
    <div id='auto-calc'>
            <input></input>
    </div>
    <div>
        <p>(cm)</p>
    </div>
</div>
<div>
    <div id='auto-calc'>
            <input></input>
    </div>
    <div >
        <p>(inches)</p>
    </div>
</div>
<div>
    <div id='auto-calc'>
            <input></input>
    </div>
    <div>
        <p>(kg)</p>
    </div>
</div>
<div>
    <div id='auto-calc'>
            <input></input>
    </div>
    <div>
        <p>(lbs)</p>
    </div>
</div>

的javascript：

$(document).ready(function() {
    $('#auto-calc input').change(function () {
        alert($(this));
    });
});

因此，如果（cm）改变了，我想自动改变（英寸），反之亦然。对于（kg）＆lt; - ＆gt; （磅）。

有什么想法吗？我知道我非常接近，我无法弄清楚这个最后的小部分

这个html将在整个表单中重复出现。因此，将有几个cm / in和lbs / kg的字段需要相互对应

Answer 1

如果您有多个具有相同单位的字段，则更容易使用输入类，例如class="cm"，并将相应的字段组合在一起。此调整Fiddle中inch到cm的示例：

$(document).ready(function () {
  $('.cm').change(function () {
    $(".inch").val($(this).val() / 0.393701);
 });
});

如果您愿意，使用类fieldgroup对容器div中的相应字段进行分组，可以将其调整为

$(document).ready(function () {
  $('.cm').change(function () {
    $(this).closest(".fieldgroup").find(".inch").val($(this).val() / 0.393701);
 });
});

仅更改相应inch输入的值。

Answer 2

HTML元素的ID属性在文档中必须是唯一的。我建议“在”，“厘米”，“磅”，“公斤”。将ID放在input元素上，以便您可以直接更改其值。

完成后，您将需要四个“更改”功能，这是正常的。当“在”更改时，您可以设置$(#kg").value等等

使用javascript计算相应的字段

2 个答案: