0

我正在尝试在单击事件上显示 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>
4

1 回答 1

0

您遇到了一个关于引用如何在 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
    }
  });
}
于 2013-02-25T13:53:08.127 回答