Преобразование обработки массива JavaScript в JQuery - PullRequest
Новая
       14

Преобразование обработки массива JavaScript в JQuery

0 голосов
/ 07 октября 2010

Я делаю назначение 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, но мои селекторы или синтаксис были неправильными, и они не работали.У меня есть смутное представление о том, как это работает для одномерного массива, но я не совсем понимаю, как перебирать элементы во вложенных массивах, т.е. массив [x] [y].

Функция создает и перемещается по2D-массив, изменяющий события id и mouse для набора изображений.

Любые мысли приветствуются:)

Ответы [ 2 ]

2 голосов
/ 07 октября 2010

Это может быть улучшено в дальнейшем, но что-то вроде этого будет работать: 

$("#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 обработчика на изображение , так что это намного дешевле со стороны загрузки страницы,и и бесконечно малая разница на стороне времени выполнения.

1 голос
/ 07 октября 2010

Это не проверено, но должно дать вам то, что вам нужно, чтобы все заработало. 

rowsArray = $("#Table1 tr"); 

for (i=0;i<rowsArray.length;i++){ 
    var images = rowsArray.eq(i).find("img");
    numSeatsInRow = images.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 = images.eq(j); 
 currentSeat.attr("id","row" + i + "Seat" + j); 
 currentSeat.mouseover(function(){this.src = "images/taken.gif"}); 
 currentSeat.mouseout(function(){this.src = "images/available.gif"}); 
 currentSeat.click(function() { 
      var self = $(this);
      self.attr("src", "images/mine.gif"); 
      self.unbind("mouseover");
      self.unbind("mouseout");
      $("#myTickets").html(this.id); 
 });   
}
...