Форум

sovsem-nub · #1 (**permalink**) 14.05.2016, 07:43

Есть такой хтмл код

<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) ?

рони · #2 (**permalink**) 14.05.2016, 10:38

Сообщение от sovsem-nub

как добавить с войство :after (:before) ?

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

рони · #3 (**permalink**) 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 · #4 (**permalink**) 14.05.2016, 12:58

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

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

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

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

рони · #5 (**permalink**) 14.05.2016, 13:00

Сообщение от sovsem-nub

А как все-таки повесить :after на input?

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

sovsem-nub · #6 (**permalink**) 15.05.2016, 07:32

Сообщение от рони

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

ну и ладно

прилепил :before к tw

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

Форум

Справочник

Discord чат

Курсы javascript