#javascript #css #css-selectors
Вопрос:
Я рисую двумерную матрицу с помощью JavaScript и CSS, но мне трудно индексировать координаты каждого элемента.
Есть пара проблем. Если я введу координаты в класс, например,
class="_1 _2"
А затем используйте либо getElementsByClassName, либо querySelector, я получу оба элемента с class="_1 _2"
и class="_2 _1"
Мое текущее решение состоит в том, чтобы использовать как класс, так и идентификатор. Затем я ссылаюсь на document.getElementsByClassName("_1")[1]
Интересно, есть ли у вас какие-либо мысли/предложения по этому поводу?
Спасибо
Комментарии:
1. почему нет
class="x1 y2"
2. Являются ли размеры матрицы динамическими или статическими ?
3. AFAIK, использующий подчеркивание в начале имени класса, «обычно» используется для конкретного поставщика или аналогичного использования.
4. Рассматривали ли вы атрибуты данных ? например
data-x="1" data-y="2"
5. Возможно, к тому времени, когда вы будете запрашивать числа, они у вас уже будут, поэтому я не вижу, какое извлечение потребуется, кроме того, любой запрос как с x, так и с y будет возвращать только один элемент. Это похоже на проблему xy
Ответ №1:
Думаю, вы могли бы использовать атрибуты данных примерно так:
const elements = document.querySelectorAll('[data-x="2"][data-y="1"]');
for (let el of elements) {
el.classList.add('selected');
}
table td {
width: 50px;
height: 50px;
margin: 2px;
background-color: green;
color: white;
}
.selected {
background-color: red;
}
<table>
<tr>
<td data-x="1" data-y="1">11</td>
<td data-x="1" data-y="2">12</td>
</tr>
<tr>
<td data-x="2" data-y="1">21</td>
<td data-x="2" data-y="2">22</td>
</tr>
</table>
Ответ №2:
Вы действительно хотите дать им всем именованные классы?
Иногда проще использовать положение элементов — например, n-го дочернего элемента(1) — в такой ситуации, поскольку к ним можно получить доступ с помощью целочисленных вычислений, а не создавать строку (или две) для соответствия классам.
Вот тривиальный пример:
function getEl(mx, row, column) {
return mx.querySelector(':nth-child(' (row - 1) * 2 column ')');
}
const matrix = document.querySelector('#matrix');
alert(getEl(matrix, 1, 2).innerHTML);
#matrix div:nth-child(odd) {
background: green;
}
<div id="matrix">
<div>A</div>
<div>B</div>
<div>C</div>
<div>D</div>
</div>
Комментарии:
1. это очень интересно. У меня есть строка класса и столбец класса. Никогда не думал о том, чтобы все элементы были в одном <div class=»матрица»>