Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 14.05.2016, 08:43
Аватар для sovsem-nub
Профессор
Отправить личное сообщение для sovsem-nub Посмотреть профиль Найти все сообщения от sovsem-nub
 
Регистрация: 15.10.2014
Сообщений: 225

Как поднятся по 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) ?
Ответить с цитированием
  #2 (permalink)  
Старый 14.05.2016, 11:38
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 29,875

Сообщение от sovsem-nub
как добавить с войство :after (:before) ?
какому элементу?
Ответить с цитированием
  #3 (permalink)  
Старый 14.05.2016, 11:43
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 29,875

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>
Ответить с цитированием
  #4 (permalink)  
Старый 14.05.2016, 13:58
Аватар для sovsem-nub
Профессор
Отправить личное сообщение для sovsem-nub Посмотреть профиль Найти все сообщения от sovsem-nub
 
Регистрация: 15.10.2014
Сообщений: 225

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

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

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


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

Последний раз редактировалось sovsem-nub, 14.05.2016 в 14:02.
Ответить с цитированием
  #5 (permalink)  
Старый 14.05.2016, 14:00
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 29,875

Сообщение от sovsem-nub
А как все-таки повесить :after на input?
никак ... добавить какой-нибудь span или label после инпут и его показывать если надо.
Ответить с цитированием
  #6 (permalink)  
Старый 15.05.2016, 08:32
Аватар для sovsem-nub
Профессор
Отправить личное сообщение для sovsem-nub Посмотреть профиль Найти все сообщения от sovsem-nub
 
Регистрация: 15.10.2014
Сообщений: 225

Сообщение от рони Посмотреть сообщение
никак ... добавить какой-нибудь span или label после инпут и его показывать если надо.
ну и ладно прилепил :before к tw

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



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как вы относитесь к наркоманам? Maxmaxmaximus7 Оффтопик 7 05.02.2014 12:29
Функция для перевода размера из байтов в понятный для человека формат Антон Крамолов Ваши сайты и скрипты 4 05.04.2013 16:42