Не работает переключатель городов

203
25 июля 2021, 14:20
$(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="офис на карте">')
    };

Не работает переключатель городов на лендинге. Подскажите пожалуйста что исправить в коде.

Answer 1

Я немного изменил ваш 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>

Answer 2

Сложно сказать, почему именно не работает, Но у вас явно ошибка в условиях 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="офис на карте">')
});
READ ALSO
как при делегировании добавить класс другому элементу

как при делегировании добавить класс другому элементу

Пробую сделать делегирование таким способомСтавлю один обработчик событий на весь код

239
CSS: position: sticky

CSS: position: sticky

В данный момент я пытаюсь сделать сайдбар, который не прокроливается, и при этом прилипает к верхней границе экрана, когда сама страница проскролливается...

366
Не получается установить элементы, как на скриншоте

Не получается установить элементы, как на скриншоте

Коллеги, подскажите, пожалуйстаНе получается сверстать L так, как на скрине

342