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

时间:2017-11-06 20:36:24

标签: javascript jquery html

我有一个接收许多人的输入文本,并根据此编号为每个人添加输入文本。我有一个for循环来处理这个问题。它还会在每个输入文本旁边添加一个带有正确人员编号的范围。

但是我在每个输入文本的name属性中使用相同的变量时遇到问题。我得到每个输入文本中的最后一个数字(当它应该是增量的时候)。

因此,标识为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

1 个答案:

答案 0 :(得分:0)

所以,我不得不改变:

 $("#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>')