querySelectorAll / is not a valid selector
Привет!
Делаю динамические табы. Структура такая: <ul> <li data-attr="a">....</li> <li data-attr="b">....</li> <li data-attr="c">....</li> ... <li data-attr="z">....</li> </ul> <div> <div data-attr="a"></div> <div data-attr="b"></div> <div data-attr="c"></div> ... <div data-attr="z"></div> </div> К каждому табу li привязан свой контект div. Табы создаются динамически, при создании им (li и div) задаётся data-attr, по которому потом при удалении они в связке и должны удаляться. "Выборка" на удаление производится при помощи document.querySelectorAll(). Проблема в том, что в отличие от HTML5, в CSS3 не валидны названия селекторов, начинающихся с цифр. При создании пользователь сам задаёт значение data-attr, которое и является названием самой вкладки таб. Какими способами можно решить такую задачу? Видятся следующие варианты: 1. Делать привязку к классу и выбирать потом по классу, а не по data-attr. 2. Присваивать автоматически значеніе для data-attr при создании табов, чтобы там по умолчанию не было в начале цифр. Например, "tab" + "название, введённое пользователем" 3. Блокировать ввод цифр для названия табов (только буквенные символы). Но такой вариант совсем не нравится. |
Alexander Belov,
зачем data, разве индекса недостаточно? |
Цитата:
|
рони,
1. Каким образом по индексу можно связать li и div? Учитывая, что табы могут добавляться и удаляться постоянно? Т.е. если например хранить всё в массиве, то индекс №..., например, не всегда будет соответствовать одному и тому же табу. 2. "Выборка" для удаления. Кликая на таб, мы находим div с таким же data-attr и удаляем их. |
Alexander Belov,
сделайте макет ... |
|
Alexander Belov, удаление по индексу
if (target == x[i]) { var li = document.querySelectorAll('.tab')[i], div = document.querySelectorAll('.content')[i]; li.parentNode.removeChild(li); div.parentNode.removeChild(div); } |
рони,
Благодарю! Всё намного проще, оказывается. Такой способ ещё не встречал. :agree: |
Alexander Belov,
проще будет при создании добавлять удаление -- тогда и цикла и индекса ненадо будет |
рони,
Не понимаю, что Вы имеете в виду. При создании мы создаём элемент и прикрепляем его к родителю, нажав на кнопку Ок. Как туда удаление увязать? + Разве не должны функции разбиваться максимально по логике? Одна на добавление, вторая на удаление и т.д., каждая для своего предназначения. |
Часовой пояс GMT +3, время: 11:54. |