Question

免责声明，我是新手开发者，但我正在学习。我已经在这个问题上工作了几天，试图解释类似的问题，但无济于事。

问题所在。我动态生成一个列表，每个<li>有4个输入字段，1个选择框和2个复选框。填充每个输入的值，用户应该能够修改。在保存时我试图使用jquery使用each（）循环遍历列表并返回值，以便我可以推入和数组/对象以每个行的对象结束，其中包含name-＆gt;值对，因此我可以传递ajax并保存更新的输入字段。

以下是创建列表的代码。（和新秀一样温柔）

echo'<li id= '.$list[id].' name="clubli" class="club">
<input type="text" name="displayorder" class="clubelement" style=" width:30px; text-align: center;" value="'.$list[display_order].'"; autofocus />
<input type="text" name="clubname" class="clubelement" value="'.$list[club_name].'" /><select id ="clubtype" name="clubtype" class="clubelement" style="width:130px;">
<option selected ="selected">'.$list[club_type].'</option>
  <option id = "'.$results1[0]->id.'">'.$results1[0]->club_type.'</option>
  <option id = "'.$results1[1]->id.'">'.$results1[1]->club_type.'</option>
  <option id = "'.$results1[2]->id.'">'.$results1[2]->club_type.'</option>
  <option id = "'.$results1[3]->id.'">'.$results1[3]->club_type.'</option>
  <option id = "'.$results1[4]->id.'">'.$results1[4]->club_type.'</option>
  <option id = "'.$results1[5]->id.'">'.$results1[5]->club_type.'</option>
</select>
<input style="text-align: center; width: 40px"; type="text" name="clubdist" class="clubelement" value= "'.$list[range_distance].'" /></option>
<input type="checkbox"; name="inactive"; class="clubelement"; '.$active.' /><input type=checkbox name="remove" class="clubelement"; />
<div style="margin-bottom:1em"></div></li>';

当用户选择保存按钮时，将调用JS，如下所示：

<script src="https://ajax.googleapis.com/ajax/libs/ jquery/1.12.0  /jquery.min.js"></script><script type="text/javascript">
function saveClubs() {
  $userclubs = [];
    $('.clubslist li').each(function(i) {
      $id=$("[name='clubli']").attr('id');
      $displayorder= $("[name='displayorder']").val();
      $clubname= $("[name='clubname']").val();
      $clubtype= $("[name='clubtype']").val();
      $clubdist= $("[name='clubdist']").val();
      $clubinactive= $("[name='inactive']").is(":checked");
      $clubremove= $("[name='remove']").is(":checked");
  $userclubs.push({'id':$id, 'displayorder':$displayorder, 'clubname':$clubname, 'clubtype':$clubtype, 'clubdist':$clubdist, 'inactive':$clubinactive, 'remove':$clubremove});
 });

的console.log（$ userclubs）;

控制台日志显示“对象”“对象”“对象”“对象”的结果，预期列表中有4行。但是每个对象都是相同的7个输入 - 列表的所有第一行。我知道循环每次读取第一行，即使它循环预期的次数。任何指导都将非常感谢....

Answer 1

你很接近，他们查询选择器（例如$displayorder= $("[name='displayorder']").val();）将匹配第一个值。因此，对于循环的每次迭代，您只获得第一个匹配的DOM元素。

要解决这个问题，您需要引用each()循环当前正在迭代的DOM元素。像这样的东西会起作用：

function saveClubs() {
  $userclubs = [];
    $('.clubslist li').each(function(i) {
      $id=$(this).attr('id');
      $displayorder= $(this).find("[name='displayorder']").val();
      $clubname= $(this).find("[name='clubname']").val();
      $clubtype= $(this).find("[name='clubtype']").val();
      $clubdist= $(this).find("[name='clubdist']").val();
      $clubinactive= $(this).find("[name='inactive']").is(":checked");
      $clubremove= $(this).find("[name='remove']").is(":checked");
  $userclubs.push({'id':$id, 'displayorder':$displayorder, 'clubname':$clubname, 'clubtype':$clubtype, 'clubdist':$clubdist, 'inactive':$clubinactive, 'remove':$clubremove});
 });
 }

以下是JS Fiddle中的一个示例，您可以在其中看到它使用基于您的PHP的一些测试数据：https://jsfiddle.net/qg063zaL/

希望有所帮助！： - ）

jquery each（）返回所有对象

1 个答案: