Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 22.08.2019, 13:45
Интересующийся
Отправить личное сообщение для kosmonavtom Посмотреть профиль Найти все сообщения от kosmonavtom
 
Регистрация: 07.03.2013
Сообщений: 27

Получение элемента по атрибуту data-*
Здравствуйте.
Нашел и собрал вот такой код с ошибками (ошибки data-reactid, elem = document.querySelector(#data-reactid); ):
<script>
function chpok(data-reactid){
    elem = document.querySelector(#data-reactid); //находим блок div который нужно как-то передать в функцию по data-reactid
    state = elem.style.display; //смотрим, включен ли сейчас элемент
    if (state =='') elem.style.display='none'; //если включен, то выключаем
    else elem.style.display=''; //иначе - включаем
}
</script>

Он должен работать (т.е. отображать блоки div или скрывать при нажатии на кнопки) для тегов HTML вида:
<button onclick="chpok('.1.$0')">
Вопрос 1
</button>
<div data-reactid='.1.$0' style="display:none">
Это выводится первый вопрос?
</div>
<button onclick="chpok('.1.$1')">
Вопрос 2
</button>
<div data-reactid='.1.$1' style="display:none">
Тут выводится второй вопрос.
</div>

Если везде заменить "data-reactid" на "id", и ошибочную строку на строку elem = document.getElementById(id); то все работает, но проблема в том, что в тегах на сайте нет и не будет аттрибута id. Подскажите пожалуйста можно ли получить элемент по атрибуту тега вида "data-reactid" - они уникальны для каждого объекта на странице. И что тогда нужно сделать? Заранее спасибо за любой ответ.

Последний раз редактировалось kosmonavtom, 22.08.2019 в 13:53. Причина: Ошибки не выделились в коде
Ответить с цитированием
  #2 (permalink)  
Старый 22.08.2019, 13:50
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,123

Сообщение от kosmonavtom
можно ли получить элемент по тегу вида "data-reactid"
Да.
Сообщение от kosmonavtom
И что тогда нужно сделать?
Начать таки читать про css селекторы...
http://htmlbook.ru/samcss/selektory-atributov
Ответить с цитированием
  #3 (permalink)  
Старый 22.08.2019, 14:13
Интересующийся
Отправить личное сообщение для kosmonavtom Посмотреть профиль Найти все сообщения от kosmonavtom
 
Регистрация: 07.03.2013
Сообщений: 27

Сообщение от ksa Посмотреть сообщение
Да.
Спасибо обнадежили
Цитата:
Начать таки читать про css селекторы...
http://htmlbook.ru/samcss/selektory-atributov
Спасибо. Интересная статья.
Я наверно не правильно сформулировал вопрос. Но у меня нет доступа ни к HTML ни к CSS на сайте я могу лишь скрипт добавить ну естественно могу добавить и HTML и CSS, но ведь такое добавление это не совсем правильно наверно?! И еще в указанной статье я не нашел взаимодействия CSS со <script>.
Ответить с цитированием
  #4 (permalink)  
Старый 22.08.2019, 14:17
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,123

kosmonavtom, какие методы по работе с ДОМ-моделью ты знаешь?
Т.е. те методы, которыми можно получить ссылки на ДОМ-элементы?
Ответить с цитированием
  #5 (permalink)  
Старый 22.08.2019, 14:36
Интересующийся
Отправить личное сообщение для kosmonavtom Посмотреть профиль Найти все сообщения от kosmonavtom
 
Регистрация: 07.03.2013
Сообщений: 27

Сообщение от ksa Посмотреть сообщение
те методы, которыми можно получить ссылки на ДОМ-элементы?
Из нескольких источников:
- по значению атрибута id;
- по значению атрибута name;
- по имени тега;
- по имени класса или классов CSS;
- по совпадению с определенным селектором CSS.

Но я так и писал в сообщении, что у меня нет значения атрибута id. И теперь могу еще добавить, что нет значения и атрибута name. Но я так и не понял - это значит не получится ничего? Или data-reactid считается селектором CSS?
Ответить с цитированием
  #6 (permalink)  
Старый 22.08.2019, 15:01
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,123

Сообщение от kosmonavtom
по совпадению с определенным селектором CSS
А как пользоваться селектором атрибута я тебе показал...
Сообщение от kosmonavtom
Но я так и не понял - это значит не получится ничего?
Ты ошибаешься...
Сообщение от kosmonavtom
Или data-reactid считается селектором CSS?
Любой атрибут можно использовать в селекторах атрибутов.
Ответить с цитированием
  #7 (permalink)  
Старый 22.08.2019, 18:55
Интересующийся
Отправить личное сообщение для kosmonavtom Посмотреть профиль Найти все сообщения от kosmonavtom
 
Регистрация: 07.03.2013
Сообщений: 27

<script>
function chpok(sr){
    elem = document.querySelector("div[data-reactid=sr]"); //находим блок div и значение атрибута data-reactid
    state = elem.style.display; //смотрим, включен ли сейчас элемент
    if (state =='') elem.style.display='none'; //если включен, то выключаем
    else elem.style.display=''; //иначе - включаем
}
</script>

Не могу понять почему вот это не работает, вроде все как в источниках. Перепробовал различные вариации записи querySelector, но ничего не срабатывает. Подскажите пожалуйста, что не так?
Ответить с цитированием
  #8 (permalink)  
Старый 22.08.2019, 19:24
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,068

kosmonavtom,
<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">

  <script>

function chpok(sr){
    var elem = document.querySelector("div[data-reactid='"+sr+"']"), //находим блок div и значение атрибута data-reactid
    style = elem.style;
    style.display = style.display !== "none" ? "none" : "" ;
     //если включен, то выключаем
   //иначе - включаем
}
</script>

</head>

<body>
 <button onclick="chpok('.1.$0')">
Вопрос 1
</button>
<div data-reactid='.1.$0' style="display:none">
Это выводится первый вопрос?
</div>
<button onclick="chpok('.1.$1')">
Вопрос 2
</button>
<div data-reactid='.1.$1' style="display:none">
Тут выводится второй вопрос.
</div>

</body>
</html>
Ответить с цитированием
  #9 (permalink)  
Старый 22.08.2019, 19:40
Интересующийся
Отправить личное сообщение для kosmonavtom Посмотреть профиль Найти все сообщения от kosmonavtom
 
Регистрация: 07.03.2013
Сообщений: 27

Спасибо
Итого:
1) var - я не написал
2) +sr+ - плюсы я не поставил
3) короткое написание функции
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как получить доступ к атрибуту элемента из массива? PolarWolf1 Элементы интерфейса 1 20.11.2017 04:46
получение значений из массива и вставка нового элемента malefikus13 Общие вопросы Javascript 7 06.10.2015 11:56
Получение значения динамически созданного элемента skeef jQuery 3 21.06.2014 17:45
Получение элемента в функции, используя each() ansi_str jQuery 0 30.11.2012 09:48
Получение значения соседнего элемента Max Tretyakov Events/DOM/Window 2 27.06.2011 22:01