javascript - 将 javascript 数组处理转换为 jQuery

Question

我正在做一个 javascript 作业，并且刚刚了解到如果我愿意的话我可以用 jQuery 来完成它，而不是普通的 javascript。我想我应该尝试一下，看看它是什么样的。

这是我的 javascript 函数的内容:

    rowsArray = $("#Table1 tr");

for (i=0;i<rowsArray.length;i++){
    numSeatsInRow = rowsArray[i].getElementsByTagName("img").length;                    // discovers the number of seats in row [i]
    for(j=0;j<numSeatsInRow;j++) {                                // loops round once for each set in row [i]
 var currentSeat = rowsArray[i].getElementsByTagName("img")[j];
 currentSeat.setAttribute("id","row" + i + "Seat" + j);
 currentSeat.onmouseover = function(){this.src = "images/taken.gif"};
 currentSeat.onmouseout = function(){this.src = "images/available.gif"};
 currentSeat.onclick = function() {
      this.src = "images/mine.gif";
      this.onmouseover = null;
      this.onmouseout = null;
      document.getElementById("myTickets").innerHTML += this.id;
 }  
}

如您所见，我开始从第一行转换为 jQuery，但卡住了:)

代码按原样工作，但我认为在 jQuery 中必须有一种更优雅的方法。我尝试使用 $.each 但我的选择器或语法错误并且它不起作用。我对一维数组如何工作有一个模糊的想法，但我不清楚如何迭代嵌套数组中的项目，即 array[x][y]。

该函数创建并移动二维数组，更改一组图像的 id 和鼠标事件。

任何想法将不胜感激:)

Answer 1

它可以进一步改进，但这样的事情会起作用:

$("#Table1 tr").each(function(i) {
   $(this).find("img").each(function(j) {
     this.id = "row" + i + "Seat" + j;
     $(this).hover(function() { this.src = "images/taken.gif"; }, 
                   function() { this.src = "images/available.gif"; })
            .click(function() { 
               var img = this;
               this.src = "images/mine.gif";
               $(this).unbind("mouseenter mouseleave"); 
               $("#myTickets").html(function(i, h) { return h + img.id; });
             });
   });
});

使用 .each() 并且它作为回调的第一个参数传递的索引稍微缩短了它(你不需要自己的 i 和 j ，它们已经在那里了)剩下的只是 jQuery 转换，例如 .hover() 用于鼠标进入/离开和 .unbind() 稍后删除这些处理程序。

<小时/>

这是使用 .delegate() 的更详细但更更高效的版本:

$("#Table1 tr").each(function(i) {
   $(this).find("img").each(function(j) {
     this.id = "row" + i + "Seat" + j;
   });
});
$("#Table1").delegate("tr img", "click", function() { 
  var img = $(this).addClass("mine").add("src", "images/mine.gif"); 
  $("#myTickets").html(function(i, h) { return h + img.attr("id"); });
}).delegate("tr img:not(.mine)", "mouseenter", function() { 
  this.src = "images/taken.gif";
}).delegate("tr img:not(.mine)", "mouseleave", function() { 
  this.src = "images/available.gif";
});

这仅将 3 个处理程序附加到 <table>并监听要冒泡的事件，而不是为每个图像附加 3 个处理程序，因此页面加载方面的成本要低得多，并且运行时方面的差异微乎其微。