0

Есть страница меню в котором предлагается выбрать город, при смене города, страница не перезагружается, просто меняются контактные данные. Вот пример html-кода:

<!DOCTYPE html>
<html>
<head>
</head>
<body>
  <p>Выберите город:</p>

  <a href="#" class="dropbtn"><span>Вся Росссия</span></a>
  <ul class='dropdown-city'>
    <li data-value="111">link 1</li>
    <li data-value="123">link 2</li>
    <li data-value="1233">link 3</li>
  </ul>

  <address class="header">
  <a href="mailto:[email protected]">[email protected]</a>
  <div class="phone"></div>
  <a href="#">Заказать обратный звонок</a>
  </address>

</body>
</html>

Вот пример уже существующего JS-кода:

$('.dropbtn').click(function(){
$(".dropdown-city").slideToggle('fast');
});
$('.dropdown-city li').click(function(){
var tx = $(this).html();
var tv = $(this).attr('data-value');
$(".dropdown-city").slideUp('fast');
$(".dropbtn span").html(tx);
$(".phone").html(tv);
});
})

При клике на ссылку .dropbtn выпадает список, после выбора, текст "Вся Россия" меняется на выбранный город, а в блоке с контактными данными в блок .phone добавляется текст из параметра alt .
Что можно изменить JS коде, чтобы менялся еще и @mail, возможно есть практичнее способ?

1 ответ 1

2

var dropBtn = $('.dropbtn'),
  dropList = $('.dropdown-city').hide(),
  outputMail = $('.mail'),
  outputPhone = $('.phone');

dropBtn.click(function() {
  dropList.slideToggle('fast');
});

$('.dropdown-city li').click(function() {
  var $that = $(this),
    mail = $that.data('mail');
  $('span', dropBtn).text($that.text());
  outputPhone.text($that.data('phone'));
  outputMail.text(mail).attr('href', 'mailto:' + mail);
  dropList.slideUp('fast');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>Выберите город:</p>

<a href="#" class="dropbtn"><span>Вся Росссия</span></a>
<ul class='dropdown-city'>
  <li data-phone="01" data-mail="[email protected]">link 1</li>
  <li data-phone="02" data-mail="[email protected]">link 2</li>
  <li data-phone="03" data-mail="[email protected]">link 3</li>
</ul>

<address class="header">
  <a class="mail" href="mailto:[email protected]">[email protected]</a>
  <div class="phone"></div>
  <a href="#">Заказать обратный звонок</a>
</address>

3
  • Спасибо большое, все работает! )) Могу я спросить это считается корректным так использовать JS или есть более практичный способ решить поставленную задачу?
    – SvArt713
    16 мар 2016 в 7:13
  • @SvArt713, вопрос не очень понятен. Инструменты и способы реализации подбираются исходя из поставленной задачи, возможностей и других факторов. Я вашу задачу вижу только в рамках вопроса, поэтому о каких-то более практичных способах рассуждать не могу.
    – Deonis
    16 мар 2016 в 9:38
  • Я Вас понял, спасибо большое! ))
    – SvArt713
    16 мар 2016 в 12:23

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.