Получение элемента по атрибуту 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" - они уникальны для каждого объекта на странице. И что тогда нужно сделать? Заранее спасибо за любой ответ. |
Цитата:
Цитата:
http://htmlbook.ru/samcss/selektory-atributov |
Цитата:
Цитата:
Я наверно не правильно сформулировал вопрос. Но у меня нет доступа ни к HTML ни к CSS на сайте я могу лишь скрипт добавить ну естественно могу добавить и HTML и CSS, но ведь такое добавление это не совсем правильно наверно?! И еще в указанной статье я не нашел взаимодействия CSS со <script>. |
kosmonavtom, какие методы по работе с ДОМ-моделью ты знаешь?
Т.е. те методы, которыми можно получить ссылки на ДОМ-элементы? |
Цитата:
- по значению атрибута id; - по значению атрибута name; - по имени тега; - по имени класса или классов CSS; - по совпадению с определенным селектором CSS. Но я так и писал в сообщении, что у меня нет значения атрибута id. И теперь могу еще добавить, что нет значения и атрибута name. Но я так и не понял - это значит не получится ничего? Или data-reactid считается селектором CSS? |
Цитата:
Цитата:
Цитата:
|
<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, но ничего не срабатывает. Подскажите пожалуйста, что не так? |
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>
|
Спасибо :)
Итого: 1) var - я не написал 2) +sr+ - плюсы я не поставил 3) короткое написание функции :write: |
| Часовой пояс GMT +3, время: 02:40. |