Цвет 2-х ячеек шириной и 3-х ячеек высотой при клинке на элементе TD - PullRequest
Новая
       6

Цвет 2-х ячеек шириной и 3-х ячеек высотой при клинке на элементе TD

0 голосов
/ 05 сентября 2011

Я ищу способ сделать сетку (пока что использую Table, но скоро в div).Скажем так: я нажимаю на первую ячейку (x, y = 1, -1). Я хочу, чтобы цвет фона изменился для ширины 2 ячеек и высоты 3 ячеек.(Всего изменилось 6 ячеек) ...

Если это проще сделать с помощью div, продолжайте ... используя jQuery, пожалуйста!:)

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

Я действительно ценю вашу помощь, 100 раз спасибо

РЕДАКТИРОВАТЬ:

То, что я пытаюсь сделать на самом деле здесь, это невидимый грод, сделать систему сравнимой с играми, подобными ртсгде здание является прозрачным и следует за мышью, но при перемещении оно прикрепляется к сетке, а при щелчке на нем отбрасывается выпуклость (без прозрачности) ... Объясняю это просто для того, чтобы вы могли немного визуализировать здесь.

1 Ответ

1 голос
/ 05 сентября 2011

Следующее относится к div (так как это долгосрочная цель):

Сначала я сделал небольшую разметку, которая будет похожа на таблицу.

html: 

<div id="overall">
    <div class="row">
        <div class="cell col0"></div><div class="cell col1"></div><div class="cell col2"></div><div class="cell col3"></div>   
    </div>
    <div class="row">
        <div class="cell col0"></div><div class="cell col1"></div><div class="cell col2"></div><div class="cell col3"></div>
    </div>
    <div class="row">
        <div class="cell col0"></div><div class="cell col1"></div><div class="cell col2"></div><div class="cell col3"></div>       
    </div>
    <div class="row">
        <div class="cell col0"></div><div class="cell col1"></div><div class="cell col2"></div><div class="cell col3"></div>    
    </div>   
</div>

Со следующим css: 

.row{
    height:25px;
}
.cell{
    width:25px;
    height:100%;
    display:inline-block;
    border:1px solid black;
}

Таким образом, он имеет отображение, похожее на таблицу (это набор строк, состоящий из ячеек, ячейки в одном столбце имеют общий класс).

Чтобы сделать то, что вы хотите, похоже, вам нужно связать функцию щелчка с каждым .cell.

Чтобы сделать это легко, используйте $(".cell").click(function(){});

Теперь пришло время завершить функцию.

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

.clickedCell{
    background:red;
}

Самое сложное - это выбрать 6 ячеек.Можно использовать множество способов (например, у нас может быть сетка идентификаторов, таких как А1, А2, В1, В2, и выбирать их с помощью идентификатора), и эффективность / дизайн сильно зависит от разметки, которую вы будете иметь для своих элементов.

Я бы сделал следующее:

  • Получение класса столбца моей ячейки: 

    var cl=$(this).attr("class");
var col="."+/col\d/.exec(cl)[0];

  • Извлечение родителя текущего div var parent=$(this).parent();

  • Создание объекта jQuery, содержащего 3 ячейки в текущем столбце: 

    listOfCell=$(this);
listOfCell=listOfCell.add(parent.next().children(col));
listOfCell=listOfCell.add(parent.prev().children(col));

    Обратите внимание, чтоФункция add возвращает новую коллекцию, поэтому нам нужно присвоить возвращаемое значение.

  • Добавление 3 следующих ячеек к этому объекту listOfCell=listOfCell.add(listOfCell.next());

  • Добавлениекласс listOfCell.addClass("clickedCell");

И все кончено:)

Рабочий пример здесь: http://jsfiddle.net/KZFzd/1/

Обратите внимание, что:

  • Как сказано выше, функция сильно зависит от используемой разметки.
  • В примере не обрабатывается удаление ранее выбранных ячеек.Это просто и оставлено читателю в качестве упражнения.
  • Он не обрабатывает особый случай ячеек сбоку, он просто меняет фон ячейки, который будет изменен, если сетка будет больше.Этот случай оставлен читателю в качестве упражнения.
  • Он не проверяет существование следующих / предыдущих родителей, потому что jQuery возвращает пустой объект jQuery, когда ничего не совпадает, и, следовательно, к нему можно вызывать методы, дажеесли он не имеет эффекта.
  • Пример может быть сжат во многих отношениях, но оставлен как есть для удобства чтения.

Надеюсь, что это поможет.

РЕДАКТИРОВАТЬ: Чтобы ответить на ваш комментарий, новая скрипка для обработки указанного размера: http://jsfiddle.net/KZFzd/3/

Я добавил два ввода, которые позволяют указать размер.Вам, вероятно, придется изменить это в своем коде :).

Я также добавил удаление классов для очистки дисплея.

Итак, два основных изменения в том, что теперь мыиспользуя две for петли, чтобы добавить ячейки.А нажатая ячейка - это верхний левый угол прямоугольника.

  • первый: 

    for (i=1;i<y;i++){
   listOfCell=listOfCell.add(par.children(col));
   par=par.next();
}

    Это просто итерация от одного родителя к другому, чтобы достичь желаемогорост.(и первое родительское назначение теперь напрямую следующее. par=$(this).parent().next()

  • второе: 

    for (i=1;i<x;i++){
    listOfCell=listOfCell.add(listOfCell.next());
}

    Это просто повторение, чтобы добавить следующие элементы вдостигните желаемой ширины.

Обратите внимание, что:

  • Мы используем тот факт, что в списке jQuery нет ширины.
  • Мы выполняем итерацию, начиная с 1, а не с 0, потому что наша стартовая listOfCell уже является ячейкой 1 * 1
  • Вы можете легко начать с другого угла, если вы измените использование next()до prev() в одном цикле и / или другом.
  • Он все еще не обрабатывает боковые случаи.
...