Перебор соседних элементов по "кругу"
Страничка заполняется квадратами, размер которых задается с помощью prompt. Ширина и высота окна формируется в соответствии от размера самого окна.
Хочу сделать что бы при клике на один из квадратов, все квадраты вокруг него изменяли цвет и так по степени нарастания области (как волна после того как кинул предмет в воду). Но не хватает опыта, помогите придумать саму логику. Думал по индексам писать формулу, но тогда формула нужна для каждого квадрата. |
Цитата:
Цитата:
|
Вот так я заполняю страничку квадратами.
function myFunction() { var square = prompt("Please enter square size in px"); var squareSize = parseInt(square); if (square != null) { var wrapper = $('.wrapper').width(); var wrapperHeight = $('.wrapper').height(); var a = (wrapper / squareSize |0) * (wrapperHeight / squareSize |0); var items = wrapper / squareSize |0; for (var i = 0; i < a; i++) { $('.wrapper').append('<div class="child">' + i +'<div>'); $('.child').css({ width: squareSize, height: squareSize }); }; } } Как тогда быть, если я выберу угловой квадрат, тогда ведь массив инддексов должен совсем иначе считаться чем при выборе квадрата где то в центре странички. |
Вот код в действии http://jsfiddle.net/falkone/73gLc3ap/1/
|
Цитата:
|
Тогда как более правильно обойти выбранный и получить массив элементов вокруг него? Может изначально посчитать его порядковый номер именно в плане координат Х и У(строка и столбик) и потом уже из этого думаю будет не так сложно искать соседние?
|
|
Цитата:
|
Цитата:
|
Цитата:
|
Часовой пояс GMT +3, время: 10:28. |