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

J8
На сайте с 06.05.2012
Offline
40
715

Здравствуйте уважаемые форумчане! Помогите пожалуйста написать несложный скрипт.

На сайте http://yakov89.ru/portfolio/unseo/ Необходимо сделать так чтоб

1. Список городов был изначально скрыт, появлялся при клике на город (Краснодар)

2. При выборе города список должен исчезнуть, появиться уже выбранный город и помимо этого должен измениться телефон справа в зависимости от города.

3. Так же было бы хорошо чтоб выбор сохранялся в куках.

Я сам занимаюсь простой версткой и с javascript знаком плохо. Заранее спасибо!

I2
На сайте с 07.03.2015
Offline
38
#1

Не проверял, но думаю, что должно работать.



function createCookie(name,value,days) {
var expires = "";
if (days) {
var date = new Date();
date.setTime(date.getTime() + (days*24*60*60*1000));
expires = "; expires=" + date.toUTCString();
}
document.cookie = name + "=" + value + expires + "; path=/";
}

function readCookie(name) {
var nameEQ = name + "=";
var ca = document.cookie.split(';');
for(var i=0;i < ca.length;i++) {
var c = ca;
while (c.charAt(0)==' ') c = c.substring(1,c.length);
if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
}
return null;
}

function eraseCookie(name) {
createCookie(name,"",-1);
}


$('.city').on('click', function(e) {
$('.city-choose').addClass('active');
e.preventDefault();
});
$('.city-choose li').on('click', function(e) {
var some = $(this).data('some'); //
var val = $(this).data('val');
var all = $(this).data('all');
$('.phones .tel').attr('href', 'tel:'+all).empty().apped('<span>'+some+'<span> '+val);
$('.city').text( $(this).text() );
$('.city-choose').removeClass('active');
if( !readCookie('city') ) {
createCookie('city', $(this).text()+'&'+all, 1);
}else {
eraseCookie('city');
createCookie('city', $(this).text()+'&'+all, 1);
}
e.preventDefault();
});
$('.city-choose .close').on('click', function(e) {
$('.city-choose').removeClass('active');

e.preventDefault();
})


.city-choose {
display: none;
&.active {
display: block;
}
}

ну и нужно дата атрибуты заполнить для телефонов. По js коду видно где и какие атрибуты http://prntscr.com/guoh22

Качественная верстка PSD макетов (/ru/forum/974524)

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий