Выбор смежного td в таблице сетки с jQuery

Я пытаюсь сделать простые игры чисел с помощью jQuery. Я построил сетку 7x7, используя таблицу html. Я создал некоторые функции jQuery, чтобы пользователь мог выделить и не выделить ячейки в таблице. Я хотел бы сделать так, чтобы первая ячейка, которую пользователь выбирал, должна находиться в крайнем левом столбце, а затем каждая последующая ячейка должна быть смежной с выделенной, пока они не соедините ячейки до правой стороны Таблица. Ячейки будут иметь номера в них, и там будет какая-то игровая функциональность, которую я еще не установил.Выбор смежного td в таблице сетки с jQuery

С помощью простой булевой и некоторой логики if я установил, что первая ячейка должна быть из левого столбца, но теперь У меня возникли проблемы с тем, чтобы каждая последующая ячейка была такой, которая находится рядом с выделенной ячейкой , Я дал каждому td в таблице пронумерованный id, от 1-49 (7 строк по 7). Когда пользователь выбирает ячейку, я фиксирую идентификатор этой ячейки в массиве с именем cellCoord. Я надеялся, что что-то подобное может работать:

var thisCell = parseInt($(this).attr('id')); 
if (thisCell == (cellCoord[i]+1) || thisCell == (cellCoord[i]-1) || 
    thisCell == (cellCoord[i]+7) || thisCell == (cellCoord[i]-7))

К сожалению, это не так. Какие-либо предложения?

Ранний проект моих усилий можно найти here.

источник

2013-02-22 Andy

'id' не может начинаться с числа во всех версиях html до 5. Вы можете использовать атрибут 'data-'. Хотя я знаю, что это не отвечает на вопрос. Поразмыслив, я должен указать на это. –

Ну, я их пронумеровал ( и т. Д.), А затем проанализировал, затем использовал parseInt ($ (this) .attr ('id')). Разве это не работает так, как я думаю? – Andy

Относительно вопроса. Является ли 'i' номером ранее выбранной ячейки? И, если они уже являются ints, какой смысл использовать массив? Кажется, что это должно работать, за исключением случаев кросс, что является результатом этого кода? –

Подобрав таблицу с вашего сайта, я хотел бы изменить его немного добавляя классы

<table> 
    <tr class="row"> 
     <td class="square candidate"></td> 
     <td class="square"></td> 
     <td class="square"></td> 
     <td class="square"></td> 
     <td class="square"></td> 
     <td class="square"></td> 
     <td class="square"></td> 
    </tr> 
    ... 
</table>

CSS:

.square { 
    width: 30px; 
    height: 30px; 
    border: white solid 1px; 
    background-color: lightblue; 
} 

.highlighted { 
    background-color: lime; 
}

, а затем выбрать соседние квадраты

$('.square').click(function() { 
    if ($(this).hasClass('candidate')) { 
     $(this).addClass('highlighted'); 
     // select adjacent squares 
     // horizontal 
     $(this).prev('.square').addClass('candidate'); 
     $(this).next('.square').addClass('candidate'); 
     // vertical 
     var i = $(this).index(); 
     $(this).parent('.row').prev('.row').children(':eq(' + i + ')').addClass('candidate'); 
     $(this).parent('.row').next('.row').children(':eq(' + i + ')').addClass('candidate'); 
    } 
});

Площадь .candidate, если он находится рядом с уже площадью .highlighted.

источник

2013-02-22 22:14:35

Это выглядит многообещающе. Спасибо за предложение. – Andy

Это, безусловно, направление в правильном направлении. Что мне нужно сделать, так это следить за тем, какие ячейки выделены (а не сбросить их каждый клик) и создать if-logic, чтобы ограничить пользователей только тем, чтобы выделить ячейки, которые находятся рядом с уже освещенными. – Andy

@ Andy Просто удалите сброс и добавьте класс 'highlight' и проверьте его. –

Функциональность jQuery's .index() может решить эту проблему. Он может указать вам, какой элемент выбран в группе элементов.

http://api.jquery.com/index/

источник

2013-02-22 21:45:35

Присвоить каждую ячейку Х и Y координаты. Кроме того, добавьте класс «selected» для любого div, который подсвечивается. Например.

<div data-x="1" data-y="1"><div data-x="2" data-y="1"> 
<div data-x="1" data-y="2"><div data-x="2" data-y="2">

Тогда что-то вроде следующего.

var div = $('#idOfDivJustClicked'); 
var x = div.data('x'); 
var y = div.data('y');

Тогда поиск дивы с помощью селектора атр Jquery, что содержат х или координату, являются плюс или минус один. Это не точная логика, вам нужно будет реализовать нечто подобное.

if ($('div[data-x=' + (x+1) + '][data-y=' + y + ']').hasClass('selected')) 
{ 
    // found an adjacent highlighted cell 
    // execute code 
}

источник

2013-02-22 21:46:05

Выбор смежного td в таблице сетки с jQuery

ответ

Смежные вопросы