Перебор соседних элементов по "кругу"
Страничка заполняется квадратами, размер которых задается с помощью 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, время: 16:35. |