将变量传递给输入文本的属性名称答案

【问题标题】：Pass a variable to attribute name for input text将变量传递给输入文本的属性名称
【发布时间】：2017-11-06 20:36:24
【问题描述】：

我有一个接收多个人的输入文本，并根据这个数字为每个人添加输入文本。我有一个 for 循环来处理这个问题。它还在每个输入文本旁边添加一个带有正确人员编号的跨度。

但是当在每个输入文本的名称属性中使用相同的变量时，我遇到了问题。我得到每个输入文本中的最后一个数字（当它应该是增量时）。

那么，那么，id为p19_sub_1的输入文本改变了它的值，函数根据这个值将输入文本的总数相加。

如何以编程方式设置正确的名称属性，例如：p18_sub_1_X 其中“X”应从 1 更改为 n (#p19_sub_1 value)？

$("#p19_sub_1").change(function() {

  $("#contenedor_de_personas").empty()

  var totalp = $("#p19_sub_1").val();
  var initial = 1;

  for (totalp; initial <= totalp; initial++) {
    // Runs 5 times, with values of step 0 through 4.

    console.log(initial);

    $("#contenedor_de_personas").append('<p><span>Persona ' + String(initial) + ':</span><input type="text" class="inp-text-personas" name="" value="" data-tipo="0"></p>')

  }

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="contenedor_de_pregunta_19">

  <div class="row">
    <div class="col s12">
      <h5 class="orange-text">18. ¿CUÁLES SON LOS NOMBRES Y APELLIDOS DE CADA UNA DE LAS PERSONAS QUE DURMIERON AQUÍ, LA NOCHE ANTERIOR AL DÍA DEL CENSO? (NO OLVIDE REGISTRAR A LOS RECIÉN NACIDOS, ANCIANOS Y VISITAS).
      </h5>

      <h6>Registre a las personas en el orden que se indica a continuación:</h6>
      <ul>
        <li>Jefe o jefa del hogar</li>
        <li>Hijos/as, hijastros/as y/o hijos/as</li>
        <li>Esposa/o o compañera/o</li>
        <li>Adoptivos/as solteros/as con hijos/as</li>
        <li>Hijos/as, hijastros/as y/o hijos/as</li>
        <li>Hijos/as, hijastros/as y/o hijos/as adoptivos.</li>
        <li>Adoptivos/as solteros/as sin hijos/as</li>
        <li>casados/as o unidos/as y su familia</li>
        <li>Yerno / nuera</li>
        <li>Nieto/a</li>
        <li>Padres y/o suegros</li>
        <li>Otros/as parientes: tíos/as, hermanos/as, etc.</li>
        <li>Trabajador/a del hogar.</li>
        <li>Pensionista</li>
        <li>Otras personas no parientes del/de la jefe/a: amigos(as), compadres, etc.</li>
      </ul>

    </div>

  </div>

  <div class="row">

    <p>
      <span>Total personas:</span>
      <input type="text" name="tipo_vivi" id="p19_sub_1" value="total_personas" placeholder="#" data-tipo="0">
    </p>

    <div id="contenedor_de_personas">

    </div>

  </div>

  <div class="row">
    <div class="col s12 left-align">
      <button class="btn waves-effect waves-light btn-de-retroceso" data-posicion-de-pregunta="18">Retroceso<i
                    class="material-icons left">skip_previous</i></button>
    </div>
  </div>

  <div class="row">
    <button type="submit">enviar</button>
  </div>

</div>

View on JSFiddle

【问题讨论】：

我认为您的 Fiddle 只是缺少 jQuery 库。我加了。

标签： javascript jquery html

【解决方案1】：

所以，我不得不改变：

 $("#contenedor_de_personas").append('<p><span>Persona ' + String(initial) + ':</span><input type="text" class="inp-text-personas" name="" value="" data-tipo="0"></p>')

到：

$("#contenedor_de_personas").append('<p><span>Persona ' + String(initial) + ':</span><input type="text" class="inp-text-personas" name="p18_sub1_' + initial + '" value="" data-tipo="0"></p>')

【讨论】：