Javascript-форум (https://javascript.ru/forum/)
-   Events/DOM/Window (https://javascript.ru/forum/events/)
-   -   Как поднятся по DOM на одну ступеньку вверх и выбрать следующую ветку? (https://javascript.ru/forum/events/63046-kak-podnyatsya-po-dom-na-odnu-stupenku-vverkh-i-vybrat-sleduyushhuyu-vetku.html)

sovsem-nub 14.05.2016 07:43

Как поднятся по 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) ?

рони 14.05.2016 10:38

Цитата:

Сообщение от sovsem-nub
как добавить с войство :after (:before) ?

какому элементу?

рони 14.05.2016 10:43

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>

sovsem-nub 14.05.2016 12:58

Спасибо, Рони. А как все-таки повесить :after на input?

когда я поменял стиль на

tw.yellow .item_add:after {
   content: "добавлено";
}


слово "добавлено" пропало.
может это потому, что у инпута тег не закрывается? на другие элементы нормально :after вешается...

рони 14.05.2016 13:00

Цитата:

Сообщение от sovsem-nub
А как все-таки повесить :after на input?

никак ... добавить какой-нибудь span или label после инпут и его показывать если надо.

sovsem-nub 15.05.2016 07:32

Цитата:

Сообщение от рони (Сообщение 416556)
никак ... добавить какой-нибудь span или label после инпут и его показывать если надо.

ну и ладно :) прилепил :before к tw

добавил код в демку своего js-интернет магазинчика http://novye-podarki.ru/heeg.html#Figures . Теперь, если щелкнуть на кнопочку "в корзину" появляется галочка на фотке товара. Если товар удалить из корзины, то галка исчезает :victory:


Часовой пояс GMT +3, время: 07:13.