jQuery 多行多函数，如何管理？

Question

再试一次：http://jsbin.com/wazeba/edit?js,console,output

还有一个（代码来自这里： ): http://jsbin.com/fuvoma/edit?js,console,output

在所有情况下 ID 都是相同的。

我的html:

<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-1.11.3.js"></script>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <br><br><br>

<button id="btnTest">Test many!</button>
<br><br><br>
<form id="formTest">

  <table>
    <thead>
    <tr>
      <th>Code</td>
    <th>Name</td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <input type="text" name="anumber" id="anumber">
      </td>
      <td>
        <input type="text" name="name" id="name">
      </td>
    </tr>
  </tbody>
  </table>


</form>

<button type="button" id="btnAdd">Add</button>

</body>
</html>

和我的Javascript:

jQuery(document).ready(function() {

    jQuery("#btnTest").click(function() {
        for (var i = 0; i < 10; i++) {
            console.log("Test: " + i);
            jQuery("#formTest tbody tr").last().find("input[name*='anumber']").val('243');
            jQuery('#btnAdd').click();
        }
    });


    jQuery("#btnAdd").click(function(e) {
        lastR = $("#formTest tbody tr").last();
        jQuery(lastR).clone().appendTo('#formTest tbody');
      readFnc(lastR);
    });

    function readFnc(lastR) {
      rowCode = $(lastR).find("input[name='anumber']");
      rowName = $(lastR).find("input[name='name']");
      var jqxhr = $.getJSON('http://beta.json-generator.com/api/json/get/41Lpsgmsx', function(data) {
       })
      .fail( function() {
        console.log("Error");
      })
      .done( function(data) {
        console.log("Goo!");
        rowCode.val(data.code);
        rowName.val(data.name);
        $(lastR).css({"background-color": "#99ff99"});
      });
    }

});

现在我需要使用来自每个 getJSON 的不同值来更新每一行。如何管理许多 ajax 个调用，或者更抽象地说，许多函数？

我需要在服务器响应时更新表单。就在那时。

如果我为每个 tr 分配一个 ID，那么在每次 "Add" 单击时，函数变量都会被覆盖。怎么办？

Answer 1

getJSON 是异步的，因此脚本创建 10 行，然后它解析 getJSONn 承诺，使用 last() 选择器它只将值分配给创建的最后一行。为避免此问题，您可以将克隆的对象传递给函数。只是为了说明，您可以看到 callOrder 和 resolveOrder 的顺序不同。

  var callORder = 0;

  jQuery("#btnAdd").click(function(e) {
    lastR = $("#formTest tbody tr").last();
    var newRow = jQuery(lastR).clone();
    newRow.appendTo('#formTest tbody');
    readFnc(newRow,++callORder);
  });

  var resolveOrder = 0;

  function readFnc(newR,callORder) {

    var jqxhr = $.getJSON('http://beta.json-generator.com/api/json/get/41Lpsgmsx', function(data) {})
      .fail(function() {
        console.log("Error");
      })
      .done(function(data) {
        console.log("Goo!");
        rowCode = newR.find("input[name='anumber']");
        rowName = newR.find("input[name='name']");
        rowCode.val(data.code + " " + (++resolveOrder)+ " " + (callORder));
        rowName.val(data.name);
        newR.css({
          "background-color": "#99ff99"
        });
      });
  }

jQuery(document).ready(function() {

  jQuery("#btnTest").click(function() {
    for (var i = 0; i < 10; i++) {
      console.log("Test: " + i);
      jQuery("#formTest tbody tr").last().find("input[name*='anumber']").val('243');
      jQuery('#btnAdd').click();
    }
  });

  var callORder = 0;
  
  jQuery("#btnAdd").click(function(e) {
    lastR = $("#formTest tbody tr").last();
    var newRow = jQuery(lastR).clone();
    newRow.appendTo('#formTest tbody');
    readFnc(newRow,++callORder);
  });

  var resolveOrder = 0;

  function readFnc(newR,callORder) {

    var jqxhr = $.getJSON('http://beta.json-generator.com/api/json/get/41Lpsgmsx', function(data) {})
      .fail(function() {
        console.log("Error");
      })
      .done(function(data) {
        console.log("Goo!");
        rowCode = newR.find("input[name='anumber']");
        rowName = newR.find("input[name='name']");
        rowCode.val(data.code + " " + (++resolveOrder)+ " " + (callORder));
        rowName.val(data.name);
        newR.css({
          "background-color": "#99ff99"
        });
      });
  }

});

<!DOCTYPE html>
<html>

<head>
  <script src="https://code.jquery.com/jquery-1.11.3.js"></script>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>

<body>
  <br>
  <br>
  <br>

  <button id="btnTest">Test many!</button>
  <br>
  <br>
  <br>
  <form id="formTest">

    <table>
      <thead>
        <tr>
          <th>Code</td>
            <th>Name</td>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>
            <input type="text" name="anumber" id="anumber">
          </td>
          <td>
            <input type="text" name="name" id="name">
          </td>
        </tr>
      </tbody>
    </table>


  </form>

  <button type="button" id="btnAdd">Add</button>

</body>

</html>

jQuery 多行多函数，如何管理？

jQuery many functions for many rows, how to manage?

javascript

arrays

ajax

jquery

getjson