$(document).ready(function () {
//обработка клика на ссылку переключатель города
$('.my-cityToggle').click(function() {
$('.my-arrowBottom').toggleClass('active');
$('.my-dropdown').toggleClass('active');
});
//обработка клика на сам переключатель города
$('.my-dropdown').click(function() {
var state = '';
$('.my-arrowBottom').toggleClass('active');
$('.my-dropdown').toggleClass('active');
if ($('.my-dropdown').text() == 'Ижевск') state = 'Ижевск';
else state = 'Казань','Воткинск'
toggleCity(state);
});
function toggleCity(state) {
var city = {};
if (state == 'Казань') {
city = {
'name': 'Казань',
'toggle':('Ижевск' , 'Воткинск') ,
'address': 'г. Казань ул.Такташа, д.155 , 2 этаж, офис 402',
'addressImageURL': 'https://img-fotki.yandex.ru/get/47606/234680533.2b7/0_aa58_c566ff54_XXL',
'addressMap': '/images/map2.png',
'phone1': '225-79-39',
'phone2': '5-79-39',
'email': 'noff@mail.ru'
}
}
else {
city = {
'name': 'Ижевск',
'toggle': ( 'Казань','Воткинск') ,
'address': 'г. Ижевск ул. К.Маркса, д.1777, 30 этаж, помещение 7, вход со двора',
'addressImageURL': 'https://img-fotki.yandex.ru/get/70180/157621844.1a1/0_7e63_239c7d0e_XXL',
'addressMap': '/images/map1.png',
'phone1': '8 89999',
'phone2': '8-904-24 ',
'email': 'off@mail.ru'
}
}
else {
city = {
'name': 'Воткинск',
'toggle': ( 'Казань','Ижевск'),
'address': 'г. Воткинск ул. Ленина, д.399, 1 этаж, офис№ 40',
'addressImageURL': 'https://img157621844.1a1/0_7e63_239c7d0e_XXL',
'addressMap': '/images/map3.png',
'phone1': '8-982-833 ',
'email': 'vtk@mail.ru'
}
};
;
$('.my-cityToggle').html(city.name + ' <span class="my-arrowBottom"></span>');
$('.my-dropdown').text(city.toggle);
$('.nav-block__phone__phone').html('Тел.: <span>' + city.phone1 + '</span>');
$('.nav-block__phone__address').text(city.address);
$('.my-address').text(city.address);
$('.contacts-block__contacts__phone').text('Тел.: ' + city.phone1 + ', ' + city.phone2);
$('.contacts-block__contacts').css('background', 'rgba(0, 0, 0, 0) url(' + city.addressImageURL + ') repeat scroll 0 0 / cover');
$('.contacts-block__map').html('<img src="' + city.addressMap + '" alt="офис на карте">')
};
Не работает переключатель городов на лендинге. Подскажите пожалуйста что исправить в коде.
Я немного изменил ваш dropdown
менюшку. И давайте разберем пару моментов.
1. Храните все города, в одном объекте и по ключам к нему обращайтесь.
2. Такие параметры как телефоны, храните в массиве.
3. Если я правильно понял для чего вы использовали значения toggle
, то теперь вам эти данные не нужны. Данный вариант кода будет легко расширятся, если вам понадобится добавить еще города.
let citys = {
kazan : {
'name': 'Казань',
'toggle': ('Ижевск' , 'Воткинск') ,
'address': 'г. Казань ул.Такташа, д.155 , 2 этаж, офис 402',
'addressImageURL': 'https://img-fotki.yandex.ru/get/47606/234680533.2b7/0_aa58_c566ff54_XXL',
'addressMap': '/images/map2.png',
'phones' : ['225-79-39', '5-79-39'],
'email': 'noff@mail.ru'},
izhevsk : {
'name': 'Ижевск',
'toggle': ( 'Казань','Воткинск') ,
'address': 'г. Ижевск ул. К.Маркса, д.1777, 30 этаж, помещение 7, вход со двора',
'addressImageURL': 'https://img-fotki.yandex.ru/get/70180/157621844.1a1/0_7e63_239c7d0e_XXL',
'addressMap': '/images/map1.png',
'phones' : ['8 89999', '8-904-24'],
'email': 'off@mail.ru'
},
votkinsk : {
'name': 'Воткинск',
'toggle': ( 'Казань','Ижевск'),
'address': 'г. Воткинск ул. Ленина, д.399, 1 этаж, офис№ 40',
'addressImageURL': 'https://img157621844.1a1/0_7e63_239c7d0e_XXL',
'addressMap': '/images/map3.png',
'phones' : ['8-982-833'],
'email': 'vtk@mail.ru'}
}
$('#dropdown').click(function() {
$('#dropdown__list-item').toggleClass('active');
});
$(".dropdown__item").on("click", function(){
let city = $(this).data("city");
$("#dropdown__active").text($(this).text());
changeCity(citys[city]);
});
function changeCity(city){
$("#city-info__name").text(city.name);
$("#city-info__address").text(city.address);
$("#city-info__image").attr("src",city.addressImageURL);
$("#city-info__map").attr("src",city.addressMap);
$("#city-info__phones").text(city.phones.join(", "));
}
#dropdown {
position: relative;
}
#dropdown__list-item {
display:none;
}
.active{
display: block !important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-md-2 nav-block__links" style="padding: 7px;">
<div id="dropdown">
<div id="dropdown__active">Казань</div>
<div id="dropdown__list-item">
<div data-city="kazan" class="dropdown__item">Казань</div>
<div data-city="izhevsk" class="dropdown__item">Ижевск</div>
<div data-city="votkinsk" class="dropdown__item">Воткинск</div>
</div>
</div>
</div>
<div id="city-info">
<h3 id="city-info__name"></h3>
<p id="city-info__address"></p>
<img src="" id="city-info__image">
<img src="" id="city-info__map">
<p id="city-info__phones"></p>
<p id="city-info__email"></p>
</div>
Сложно сказать, почему именно не работает, Но у вас явно ошибка в условиях if else
. Пользуйтесь консолью разработчика в браузере, чтобы отслеживать такие ошибки. Попробуйте такой вариант:
$(document).ready(function () {
//обработка клика на ссылку переключатель города
$('.my-cityToggle').click(function () {
$('.my-arrowBottom, .my-dropdown').toggleClass('active');
});
//обработка клика на сам переключатель города
$('.my-dropdown').click(function () {
var state = $('.my-dropdown').text();
$('.my-arrowBottom, .my-dropdown').toggleClass('active');
toggleCity(state);
});
function toggleCity(state) {
var city = {};
switch (state) {
case 'Казань':
city = {
'name': 'Казань',
'toggle': ('Ижевск' , 'Воткинск'),
'address': 'г. Казань ул.Такташа, д.155 , 2 этаж, офис 402',
'addressImageURL': 'https://img-fotki.yandex.ru/get/47606/234680533.2b7/0_aa58_c566ff54_XXL',
'addressMap': '/images/map2.png',
'phone1': '225-79-39',
'phone2': '5-79-39',
'email': 'noff@mail.ru'
}
break;
case 'Ижевск':
city = {
'name': 'Ижевск',
'toggle': ('Казань', 'Воткинск'),
'address': 'г. Ижевск ул. К.Маркса, д.1777, 30 этаж, помещение 7, вход со двора',
'addressImageURL': 'https://img-fotki.yandex.ru/get/70180/157621844.1a1/0_7e63_239c7d0e_XXL',
'addressMap': '/images/map1.png',
'phone1': '8 89999',
'phone2': '8-904-24 ',
'email': 'off@mail.ru'
}
break;
case 'Воткинск':
city = {
'name': 'Воткинск',
'toggle': ('Казань', 'Ижевск'),
'address': 'г. Воткинск ул. Ленина, д.399, 1 этаж, офис№ 40',
'addressImageURL': 'https://img157621844.1a1/0_7e63_239c7d0e_XXL',
'addressMap': '/images/map3.png',
'phone1': '8-982-833 ',
'email': 'vtk@mail.ru'
}
break;
}
}
$('.my-cityToggle').html(city.name + ' <span class="my-arrowBottom"></span>');
$('.my-dropdown').text(city.toggle);
$('.nav-block__phone__phone').html('Тел.: <span>' + city.phone1 + '</span>');
$('.nav-block__phone__address').text(city.address);
$('.my-address').text(city.address);
$('.contacts-block__contacts__phone').text('Тел.: ' + city.phone1 + ', ' + city.phone2);
$('.contacts-block__contacts').css('background', 'rgba(0, 0, 0, 0) url(' + city.addressImageURL + ') repeat scroll 0 0 / cover');
$('.contacts-block__map').html('<img src="' + city.addressMap + '" alt="офис на карте">')
});
Айфон мало держит заряд, разбираемся с проблемой вместе с AppLab
Пробую сделать делегирование таким способомСтавлю один обработчик событий на весь код
В данный момент я пытаюсь сделать сайдбар, который не прокроливается, и при этом прилипает к верхней границе экрана, когда сама страница проскролливается...
Коллеги, подскажите, пожалуйстаНе получается сверстать L так, как на скрине