我正在执行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()
及其作为第一个参数传递给回调的索引会使它缩短一点(您不需要自己的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个处理程序,因此在页面加载端便宜得多,并且在运行时端无穷小。关于javascript - 将javascript数组处理转换为jQuery,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/3883723/