我正在执行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]。

该函数创建并移动2D数组,从而更改一组图像的id和鼠标事件。

任何想法将不胜感激:)

最佳答案

可以进一步改进它,但是可以使用以下方法:

$("#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()及其作为第一个参数传递给回调的索引会使它缩短一点(您不需要自己的ij,它们已经存在),其余只是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个处理程序,因此在页面加载端便宜得多,并且在运行时端无穷小。

关于javascript - 将javascript数组处理转换为jQuery,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/3883723/

10-16 20:56
查看更多