Селектор по содержанию слова
Приветствую, есть такой код
$(function(){
$('.header__city-link').click(function(){
event.preventDefault();
$(".header__city-list").slideToggle('fast');
});
$('.header__city-item a').click(function(){
event.preventDefault();
var tx = $(this).html();
$(".header__city-list").slideUp('fast');
$(".header__city-link").html(tx);
if ($(".header__city-link:contains(Железногорск)")) {
$(".contacts__item--jeleznogorsk").addClass("contacts__item--active");
}else {
$(".contacts__item--jeleznogorsk").removeClass("contacts__item--active");
}
if ($(".header__city-link:contains(Белгород)")) {
$(".contacts__item--belgorod").addClass("contacts__item--active");
}else {
$(".contacts__item--belgorod").removeClass("contacts__item--active");
}
if ($(".header__city-link:contains(Курск)")) {
$(".contacts__item--kursk").addClass("contacts__item--active");
}else {
$(".contacts__item--kursk").removeClass("contacts__item--active");
}
});
})
Благодаря нему на сайт выводится список с городами, а также по идее если элемент с классом ".header__city-link" содержит в себе название одного из городов, этому городу с классом к примеру ".contacts__item--kursk", добавляется активный класс "contacts__item--active". Но моя задумка почему то не работает нормально при выборе города Железногорск, класс "contacts__item--active" добавляется всем вышеуказанным городам, а именно Железногорску, Белгороду, Курску. Хотя в коде выше указано конкретно, что если ".header__city-link" содержит именно текст Железногорск, только тогда добавляем класс"contacts__item--active". Кто подскажет в чем ошибка? |
Полностью бредовая реализация. Какой смысл чинить это?
Без протокола. Разве жикверь не передает элемент в функцию после $('.header__city-link').click ? |
Я не говорю, что это надо чинить) элемент в функцию передает. Как тогда мне реализовать задуманное?
|
Цитата:
Цитата:
Пишу ТЗ сам себе. В хтмле есть свернутый/скрытый список с названиями городов. Есть гиперлинк/ссылка открывающая этот список. В тексте этой ссыки название ранее выбранного города. Когда юзер щелкает по этой ссылке, список раскрывается/появляется и нужно выделить название того же самого города, который прописан в ссылке. Вопрос, в какой мухосрани начали селектить элементы по тексту? |
Просто добавь в ту самую ссылку атрибут с любым названием, в который тупо впиши идентификатор, по которому можно будет отождествить выбранное ранее в списке.
|
TommyDBrown,
со всех *.contacts__item-- класс убрать, выбрать нужный и установить. Цитата:
|
Список с городами, которые выбираем:
<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> Для каждого города также есть html <ul> <li class="contacts__item contacts__item--belgorod"></li> <li class="contacts__item contacts__item--vladimir"></li> <li class="contacts__item contacts__item--jeleznogorsk"></li> <li class="contacts__item contacts__item--kursk"></li> <li class="contacts__item contacts__item--orel"></li> </ul> Т.е. когда выбираем к примеру Белгород, то нашему элементу <li class="contacts__item contacts__item--belgorod"> Добавляется также класс contacts__item--active. Если другой город выбираем, то для данного элемента мы класс удаляем "contacts__item--active", а новому присваиваем |
Ну вот как это появилось? - .contacts__item--jeleznogorsk - с точкой? У всех элементов с названиями городов индивидуальное оформление?
Берешь id, в него вписываешь хоть индекс массива, хоть код города, ну пусть транслит будет id="city-jeleznogorsk". Эту же самую хрень вписываешь в любой атрибут ссылки, скажем c="jeleznogorsk" - тут не нужен префикс, мы его просто добавили во избежание коллизий, мало ли какие названия могут быть. Теперь что? function showCityList(){
/*
нашли список, он скажем в cityList
*/
cityList.getElementById('city-'+this.getAttribute('c')).classList.add('active');
}
Какая религия запрещает сделать самому себе хорошо? Сервер не твой? Выколупай весь мозг тому, чей он и пусть сделает хорошо. |
Цитата:
|
TommyDBrown,
по индексу можно ... |
TommyDBrown,
$(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(i).addClass("contacts__item--active")
})
});
|
Цитата:
<span>Ваш город: <a c="" class="header__city-link" href="#">сюда же вписывается город, или куда еще?</a></span> |
Кстати, эта хрень не нужна. И без href все нормально чакает.
Цитата:
|
Как-то я совсем с этим запутался, возникло ещё больше вопросов как это реализовать, я понимаю, что вы прекрасно понимаете, то о чем пишите, я к сожалению понимаю это отчасти, в силу узких знаний Javascript не могу написать скрипт сам. Моя изначальная реализация была мне понятней, а главное работала, правда коряво
|
Попробовал вариант рони
$(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(i).addClass("contacts__item--active")
})
});
Он почему то подсвечивает не те города, которые я выбираю |
Цитата:
|
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(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--belgorod">Белгород</li>
<li class="contacts__item contacts__item--vladimir">Владимир</li>
<li class="contacts__item contacts__item--jeleznogorsk">Железногорск</li>
<li class="contacts__item contacts__item--kursk">Курск</li>
<li class="contacts__item contacts__item--orel">Орёл</li>
</ul>
</div>
</body>
</html>
|
TommyDBrown,
Причем тут js. По-русски надо писать. У тебя есть список? Список всего 1 штука. В каждом элементе списка есть id. У тебя есть транслит городов, в id и записывай. Есть ссылка, по которой открывается список. Когда юзер щелкает по элементу в списке, ты получаешь всю инфу с этого элемента. Берешь id и записываешь в любой атрибут ссылки. Туда же записываешь название города. Список закрывается, дело сделано. Теперь если юзер переехал или его город разбомбил запрещенный в россии игил, он открывает список и там выделяется его город по связке тот самый атрибут - id. И вообще перехоти это делать. У тебя город уже написан в ссылке, и так понято ГДЕ он живет. Если он открыл список, ему нужен другой город. Зачем ему подсвечивать то, что и так уже видно? |
рони, нет, ТС просто всех запутал. Не так делается. Щас.
|
рони, в моем случае второй список имеет немного другую упорядоченность, извиняюсь, что ввел вас в заблуждение
<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> |
TommyDBrown,
а нельзя парным элементам добавить атрибут типа data-city="belgorod" и data-contact="belgorod" чтоб не парсить с помощью contains или иной реги |
Цитата:
<!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>
|
Вот как примерно работает эта тряхомудия.
<!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>
|
warren buffet,
может тогда ТС нужен плагин для кастомизации селекта? |
Я не знаю, что он делает. Два списка - это какой-то сюрреализм. С селектами проблема такая, они узкие, а городов может быть дохера. Иногда по алфавиту приходится разбивать А - внизу все на А. Б - на Б. И в несколько колонок, скажем в 3 или в 4. То есть это может быть охеренный блок такой. )
По коду выше. Чтобы закрывалось по щелчку на туловище везде, ему надо height:100%; впиндюрить, а чтобы красиво было, сделать кнопку ОК, в калбеке которой НЕ делать event.stopPropagation(); клик провалится до body и все скроется. ЗЫ. А на html интересно можно повесить щелчок? |
Вообще если список небольшой, то да, можно с помощью UI покрошить select и тогда вообще ничего больше делать не надо, только после загрузки вытащить key города из куков и воткнуть value.
|
Цитата:
Инициализировать также, через куки. Получаешь key, находишь в списке и переписываешь название города в ссылку. |
| Часовой пояс GMT +3, время: 14:29. |