在for循环中使用.text()

时间:2017-09-03 15:18:29

标签: javascript jquery

我正在创建一个包含大约一百个不同输入的表单来填充和计算。

我有办法手动完成这项工作(参见JS代码)。 但是当我添加大约100个输入字段时它不是很好,所以我希望脚本自动为for循环中的所有计算设置.text。但我不知道如何将{for循环与$(ABC).text(XYZ);一起使用 - 我已经尝试过$("#w+i+g").text(v+i);但它没有用。

.text(v+i)似乎是个问题。



$(document).ready(function() {
  $("#wohnzimmer").keyup(function() {
    v0 = $("#w0").val() * 4;
    //$("#w0g").text(v0); //THATS THE MANUAL WAY I DID BEFORE

    v1 = $("#w1").val() * 4;
    //$("#w1g").text(v1); //THATS THE MANUAL WAY I DID BEFORE


    for (var i = 0; i <= 1; i++) {
      $("#w" + i + "g").text(v0); //THATS THE AUTOMATIC WAY I WANT TO DO - BUT HOW? .text(v+i+) DOESNT WORK      	
    };

    vGes = v0 + v1;
    $("#wGes").text(vGes);
  });
});
&#13;
.text {
  margin: 5px;
  float: left;
  width: 200px;
}

.restText {
  margin: 5px;
  float: left;
}

.raumeinheitInput {
  width: 30px;
}
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>

<body>
  <form id="wohnzimmer">
    <div>
      <div class="text">
        Sofa, Couch, Liege je Sitz
      </div>
      <div class="restText">
        <input id="w0" type="text" class="raumeinheitInput" value="0" /> * 4 = <span id="w0g"> kA </span> RE
      </div>
    </div>

    <div>
      <div class="text">
        Couch L-Form
      </div>
      <div class="restText">
        <input id="w1" type="text" class="raumeinheitInput" value="0" /> * 4 = <span id="w1g"> kA </span> RE
      </div>
    </div>

    <div class="text">
      Raumeinheiten Gesamt: <span id="wGes"> kA </span>
    </div>
  </form>

</body>
&#13;
&#13;
&#13;

我希望你理解我的问题,并且我确信有一种我不知道的简单方法:(

感谢您的帮助!

1 个答案:

答案 0 :(得分:0)

$(".raumeinheitInput").each(function(){
  $("#"+ this.id + "g" ).text($(this).val() * 4);
});

Theres无需将结果存储在变量中。只需迭代输入,然后获取其id + g 的元素,并设置其内容。如果id不相关,则可以使用2d表:

 [["w0", "w0g"],
  ["w1", "w1g"],
  ["w2", "w2g"]
 ].forEach(([from,to])=> $("#"+from).text($(" #"+to).val() *4 ));