Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #21 (permalink)  
Старый 27.09.2016, 19:45
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,121

TommyDBrown,
а нельзя парным элементам добавить атрибут типа data-city="belgorod" и data-contact="belgorod" чтоб не парсить с помощью contains или иной реги
Ответить с цитированием
  #22 (permalink)  
Старый 27.09.2016, 19:55
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,121

Сообщение от TommyDBrown
в моем случае второй список имеет немного другую упорядоченность,
фигня вопрос ...
<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
   .contacts__item--active  {
     background-color: #D3D3D3;
   }

  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

  <script>
$(function() {
var city = $(".header__city-item"), contact = $(".contacts__item");
city.on("click", function(event) {
event.preventDefault();
var i = city.index(this);
contact.removeClass("contacts__item--active").eq([3,4,0,1,2][i]).addClass("contacts__item--active")
})
});
  </script>
</head>

<body>
<div class="header__center-inner">
        <div class="header__city">
          <span>Ваш город: <a class="header__city-link" href="#">выберите город</a></span>
          <ul class="header__city-list">
            <li class="header__city-item header__city-item--belgorod"><a href="#">Белгород</a></li>
            <li class="header__city-item header__city-item--vladimir"><a href="#">Владимир</a></li>
            <li class="header__city-item header__city-item--jeleznogorsk"><a href="#">Железногорск</a></li>
            <li class="header__city-item header__city-item--kursk"><a href="#">Курск</a></li>
            <li class="header__city-item header__city-item--orel"><a href="#">Орёл</a></li>
          </ul>
        </div>

<ul>

<li class="contacts__item contacts__item--jeleznogorsk">Железногорск</li>
<li class="contacts__item contacts__item--kursk">Курск</li>
<li class="contacts__item contacts__item--orel">Орёл</li>
<li class="contacts__item contacts__item--belgorod">Белгород</li>
<li class="contacts__item contacts__item--vladimir">Владимир</li>
</ul>
</div>
</body>
</html>
Ответить с цитированием
  #23 (permalink)  
Старый 27.09.2016, 20:01
Профессор
Отправить личное сообщение для warren buffet Посмотреть профиль Найти все сообщения от warren buffet
 
Регистрация: 08.07.2016
Сообщений: 1,332

Вот как примерно работает эта тряхомудия.

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
<style type="text/css">

ul.header__city-list {
	display:none;
}
a.header__city-link {
	cursor:pointer;
	color:blue;
}
	a.header__city-link:hover {
		color:navy;
		text-decoration:underline;
	}
	ul.header__city-list a {
	   cursor:pointer;
	}

	a.active,
	ul.header__city-list a:hover {
		color:brown;
		text-decoration:underline;
	}
.togD {
	display:block!important;
}
</style>
</head>
<body>

<div class="header__center-inner"><div class="header__city">

  <span>Ваш город: <a class="header__city-link">выберите город</a></span>
  
  <ul class="header__city-list">
  
	<li><a id="city-belgorod">Белгород</a></li>
	<li><a id="city-vladimir">Владимир</a></li>
	<li><a id="city-jeleznogorsk">Железногорск</a></li>
	<li><a id="city-kursk">Курск</a></li>
	<li><a id="city-orel">Орёл</a></li>
	
  </ul>
  
</div></div>

<script>

var
city_link=document.querySelector('.header__city-link'),
city_list=document.querySelector('.header__city-list'),
city_prefix='city-',

toggle_city_list=function(ev){
	ev.stopPropagation();
	city_list.classList.toggle('togD');
},

select_city=function(ev){

	if(ev.target.nodeName!='A') return;
	
	ev.stopPropagation();
	var el=ev.target;
	
	city_link.textContent=el.textContent;
	city_link.setAttribute('c',el.id);
	
	var active=city_list.querySelector('.active');
	if(active) active.classList.remove('active');
	el.classList.add('active');
	
};

city_link.addEventListener('click',toggle_city_list);
city_list.addEventListener('click',select_city);

/* скрывалка списка по щелчку с туловища */
document.body.addEventListener('click',
	function(ev){
		city_list.classList.remove('togD');
	}
);

</script>

</body>
</html>
Ответить с цитированием
  #24 (permalink)  
Старый 27.09.2016, 20:05
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,121

warren buffet,
может тогда ТС нужен плагин для кастомизации селекта?
Ответить с цитированием
  #25 (permalink)  
Старый 27.09.2016, 20:14
Профессор
Отправить личное сообщение для warren buffet Посмотреть профиль Найти все сообщения от warren buffet
 
Регистрация: 08.07.2016
Сообщений: 1,332

Я не знаю, что он делает. Два списка - это какой-то сюрреализм. С селектами проблема такая, они узкие, а городов может быть дохера. Иногда по алфавиту приходится разбивать А - внизу все на А. Б - на Б. И в несколько колонок, скажем в 3 или в 4. То есть это может быть охеренный блок такой. )

По коду выше. Чтобы закрывалось по щелчку на туловище везде, ему надо height:100%; впиндюрить, а чтобы красиво было, сделать кнопку ОК, в калбеке которой НЕ делать event.stopPropagation(); клик провалится до body и все скроется.

ЗЫ. А на html интересно можно повесить щелчок?
Ответить с цитированием
  #26 (permalink)  
Старый 27.09.2016, 20:17
Профессор
Отправить личное сообщение для warren buffet Посмотреть профиль Найти все сообщения от warren buffet
 
Регистрация: 08.07.2016
Сообщений: 1,332

Вообще если список небольшой, то да, можно с помощью UI покрошить select и тогда вообще ничего больше делать не надо, только после загрузки вытащить key города из куков и воткнуть value.
Ответить с цитированием
  #27 (permalink)  
Старый 27.09.2016, 20:20
Профессор
Отправить личное сообщение для warren buffet Посмотреть профиль Найти все сообщения от warren buffet
 
Регистрация: 08.07.2016
Сообщений: 1,332

Цитата:
city_link.setAttribute('c',el.id);
Этого не надо уже. Я сперва делал как ТС хотел, а нафига, если оно уже щелкнуто и значит уже можно выделить.

Инициализировать также, через куки. Получаешь key, находишь в списке и переписываешь название города в ссылку.
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Фильтр по начальным буквам слова Shasoft Общие вопросы Javascript 13 22.03.2015 11:20
Выбор случайного слова из списка alerzo Элементы интерфейса 3 19.04.2014 15:46
необходими разделить строку на слова и положить слова в массив при помощи цикла for oneee Общие вопросы Javascript 5 05.09.2012 14:30
Динамический селектор raindew Элементы интерфейса 3 20.11.2011 18:37
Предыдущий селектор KupueIIIKo jQuery 1 05.10.2011 01:27