Сетка Sizer с jQuery

Question

Я пишу себе небольшую игру на JavaScript с использованием jQuery. В игре есть доска с ячейками, похожая на Сапера: пользователь щелкает ячейку, и ее данные необходимо каким-то образом изменить. Каждая ячейка представлена ​​простым изображением, но с ней связано еще несколько данных.

Что мне больше всего нужно, так это то, что когда пользователь щелкает ячейку, я должен каким-то образом определить строку и столбец, по которым был выполнен щелчок, соответствующим образом управлять данными и изменить представление.

С одной стороны, установка обработчика щелчков в каждой отдельной ячейке кажется излишним, но если вы установите обработчик щелчков для всей таблицы, он станет PITA, чтобы определить, какая ячейка таблицы была нажата.

Как бы вы справились с такой ситуацией? Может быть, есть плагин, который может упростить все это?

Answer 1

добавить обработчик кликов на всю таблицу. используйте event.target , чтобы получить нажатую ячейку. добавьте в каждую ячейку атрибут, который скажет вам, что это за строка / столбец, и вам не нужно запускать какой-либо массивный / тяжелый JS, чтобы понять это.

psuedocode:

$("table.game").click(function(e){
  var cell = e.target;
  var pos = $(cell).attr("name").split["_"];
  var x = pos[0];
  var y = pos[1];
  return false;
});

разметка:

<table class="game">
  <tbody>
  <tr>
   <td name="0_0">
     sdfasdfa
   <td>
  </tr>
  </tbody>
</table>

примечание: имя, начинающееся с цифры, не годится, поэтому исправьте при необходимости

Answer 2

Это прекрасный пример отличного использования функции live(). Чтобы найти позиции x и y, вам просто нужно посчитать количество ячеек перед или строк выше этой:

$('#minesweeperTable td').live('click', function() {
    var $this = $(this),
        xPos = $this.prevAll('td').length,
        yPos = $this.closest('tr').prevAll('tr').length
    ;
    // your code here
});

Самое приятное в этом то, что независимо от того, сколько ячеек у вас есть, есть только один обработчик событий , который повышает производительность.

Answer 3

Пузыри события click и исходная цель могут быть найдены в свойстве srcElement объекта события (я думаю, или это может быть другое свойство, но оно есть).

Answer 4

Если у вас слишком много ячеек таблицы, установка обработчиков щелчков была бы тяжелой, но вы можете сделать обходной путь для вычисления номера поля по событиям клика мыши. ваш экран, и вы можете рассчитать, какое поле находится под этим пикселем.

Или

Вы также можете использовать event.target, чтобы получить узел, по которому щелкнули.

проверить jquery.event .

надеюсь, это поможет, Синан.

Answer 5

Если ваша таблица генерируется динамически (например, js или php), у вас может быть каждая ячейка с атрибутами класса и / или id, которая дает вам информацию.

Я не знаю, как вы представляете свои ячейки, поэтому в псевдокоде:

<table id="board">
  <row>
    <cell id="cell-0x0" />
    <cell id="cell-0x1" />
    ...
  </row>
  <row>
    <cell id="cell-1x0" />
    ...
  </row>
  ...
</table>

Тогда в jQuery:

$('#board cell').click(function(){
  var coord = $(this).attr('id').substr(5).split('x');
  // do your stuff
});