Как поднятся по DOM на одну ступеньку вверх и выбрать следующую ветку?
Есть такой хтмл код
<tw class="simpleCart_shelfItem"> <span class="item_nazvanie" itemprop="name"> <a class="tc-tiddlylink tc-tiddlylink-resolves" style="background-color: yellow;" href="#10010">Букет для любимой девушки ➨</a> </span> <input class="item_add" type="button" value="в корзину"> </tw> я по href могу выбрать блоки с <a class="tc-tiddlylink tc-tiddlylink-resolves" и поменять ему фон на желтый
var matches = document.querySelectorAll('[href="'+'#'+ encodeURIComponent(item.name)+'"]');
for(var i = 0; i < matches.length; i++) {
matches[i].style.backgroundColor = "yellow";
}
но мне нужно поменять фон кнопки <input class="item_add" , которая находится под этой ссылкой, если подняться на один уровень через span . Как мне к этому блоку обратится? И еще вопрос как добавить с войство :after (:before) ? |
Цитата:
|
sovsem-nub,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
tw.yellow a, tw.yellow .item_add{
background-color: #FFFF00;
}
tw.yellow:after {
content: "добавлено";
}
</style>
<script>
window.addEventListener('DOMContentLoaded', function() {
var nodes = document.querySelectorAll('.simpleCart_shelfItem'),
item = {name : 10010};
[].forEach.call( nodes, function(tw) {
var a = tw.querySelector('[href="'+'#'+ encodeURIComponent(item.name)+'"]');
if(a){
tw.classList.add("yellow")
}
});
});
</script>
</head>
<body>
<tw class="simpleCart_shelfItem">
<span class="item_nazvanie" itemprop="name">
<a class="tc-tiddlylink tc-tiddlylink-resolves" href="#10010">Букет для любимой девушки ➨</a>
</span>
<input class="item_add" type="button" value="в корзину">
</tw>
</body>
</html>
|
Спасибо, Рони. А как все-таки повесить :after на input?
когда я поменял стиль на
tw.yellow .item_add:after {
content: "добавлено";
}
слово "добавлено" пропало. может это потому, что у инпута тег не закрывается? на другие элементы нормально :after вешается... |
Цитата:
|
Цитата:
добавил код в демку своего js-интернет магазинчика http://novye-podarki.ru/heeg.html#Figures . Теперь, если щелкнуть на кнопочку "в корзину" появляется галочка на фотке товара. Если товар удалить из корзины, то галка исчезает :victory: |
| Часовой пояс GMT +3, время: 19:58. |