Question

我正试图在点击事件上显示Mysql查询结果。结果可能会有所不同，具体取决于单击的链接。所以我想在我的点击功能中添加一个FOR循环。我的代码似乎错了：

<script src="http://yui.yahooapis.com/3.8.1/build/yui/yui-min.js"></script>
<script>
YUI().use("node", function (Y) { 
  for (var i=1; i<4; i++) { 
    Y.one("#link" + i).on('click', function ajaxFunction(i){

    var id = document.getElementById("link" + i).className;
    Y.io('query.php',
       {
  type: "GET",
  data: "id="+id,
  success: function (msg) {
        Y.one("#display_div" + i).setHTML(msg);
}
    });

        });
    };
});
</script>

<a href="#" id="link" class="(Test 1)"> Maths</a>
<div id="display_div1"></div>

<a href="#" id="link" class="FAQ"> Anglais</a>
<div id="display_div2"></div>

此代码是我工作的jQuery代码的YUI3中的翻译：

<script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script>
<script languid="javascript" type="text/javascript">
$(document).ready(function() { 
  for (var i=1; i<4; i++) { 
    $("#link" + i).click(makeDisplayCallback(i));
  }
});
function makeDisplayCallback(j) {
  return function() {
    ajaxFunction(j);
  };
}
function ajaxFunction(j){
var id = document.getElementById("link" + j).className;
$.ajax(
   {
  type: "GET",
  url: "query.php",
  data: "id="+id,
  success: function (msg) {
        $("#thema" + j).html(msg);
}
   });
};

</script>

Answer 1

您正在尝试使用JavaScript中的引用如何工作的经典示例。调用success回调时，i的值始终为2，因为它已更改为下一次迭代。你需要做的是将每个回调包装在另一个函数中，这样每个函数都指向不同的i值。

for (var i = 1; i < 3; i++) {
  Y.io(url, {
    on: {
      // on each iteration the success function is a different function
      success: (function (index) {
        return function (msg, result) {
          Y.one('#display_div' + index).setHTML(msg);
        };
      }(i)); // we pass it the current value of i
    }
  });
}

YUI + Ajax使用FOR循环获取Click事件

1 个答案: