Показать сообщение отдельно
  #1 (permalink)  
Старый 11.04.2014, 22:53
Новичок на форуме
Отправить личное сообщение для zeppeline Посмотреть профиль Найти все сообщения от zeppeline
 
Регистрация: 11.06.2013
Сообщений: 2

Псевдо-toggle и изменение порядка расположения элементов по клику
Написал индусский javascript, использующий jQuery и понял, что получил не то, что хотел.

Вкратце задача следующая: на странице товара цена представлена в трёх валютах: два дива блока со значениями цены скрыты, а один отображается. Причем изначально отображается базовая валюта, которую пользователь указал при размещении объявления (остальные два значения цены в альтернативных валютах вычисляются на сервере).

Для того, чтобы посетитель страницы имел возможность увидеть цену в приемлемой для него валюте, рядом с отображенной ценой предусмотрен всплывающий блок со краткими наименованиями валют (USD, EUR, BYR). При клике на значок валюты - высвечивается цена в данной валюте...

Вроде бы всё работает, несмотря на страшный код, но есть неудобный ньюанс: поскольку порядок блоков сейчас жёстко прописан в html шаблоне, во всплывающих блоках краткие наименования валют всегда расположены в одной и той же последовательности, что нелогично с точки зрения посетителя сайта: для него было бы удобнее, чтобы наименование валюты, в которой в данный момент отображается цена, выводился первым, а альтернативные — потом. Т.е. Человек видит цену в USD, рядом с ценой видит псевдо-ссылку "USD", при наведении мышки на которую ниже всплывают ссылки EUR и BYR. Если базовая цена определена в USD - проблема не выявляется, но если она к примеру, в EUR, первым всплывает всё равно блок USD.

Появилась мысль, что порядок вывода блоков с кратким наименованием валют должен меняться с помощью javascript. Т.е., если цена в белорусских рублях - первой в списке обозначений валют при наведении мышки на блок c кратким обозначением белорусского рубля должен быть блок с надписью BYR, а не USD, как сейчас.

Поскольку познания в javascript на данный момент стремятся к нулю, обращаюсь за помощью к более сведущим людям.
<div id="multiprice"><div id="price" style="float:left"><div class="usd_price" style="display:none">$ 69</div>
<div class="eur_price" style="display:none">€ 50</div>
<div class="byr_price">495000</div></div>
<div id="toggle_sheet" style="float:left; margin:6px;">
    <div class="usd_toggle" style="display:none"><a href="#">USD</a></div>
    <div class="eur_toggle" style="display:none"><a href="#">EUR</a></div>
    <div class="byr_toggle"><a href="#">BYR</a></div></div></div>


var curr = "byr";
$("#toggle_sheet").hover(function() {
  $(".usd_toggle").show();
   $(".eur_toggle").show();
   $(".byr_toggle").show();
},
function() {
    
    $(".usd_toggle").click(function() {
    $(".usd_price").show();
    $(".eur_price").hide();
    $(".byr_price").hide();
   $(".eur_toggle").hide();
   $(".byr_toggle").hide();
        curr = "usd";
		return false;
});
    
    
    $(".eur_toggle").click(function() {
  $(".eur_price").show();
    $(".usd_price").hide();
    $(".byr_price").hide();
   $(".usd_toggle").hide();
   $(".byr_toggle").hide();
        curr = "eur";
		return false;
            
}); 
    

     $(".byr_toggle").click(function() {
  $(".byr_price").show();
    $(".usd_price").hide();
    $(".eur_price").hide();
   $(".usd_toggle").hide();
   $(".eur_toggle").hide();
         curr = "byr";
		 return false;
     
}); 
       if (curr == "usd")
    {
    $(".eur_toggle").hide();
   $(".byr_toggle").hide();
    }
    if (curr == "eur")
    {
   $(".usd_toggle").hide();
   $(".byr_toggle").hide();    
    }
    if (curr == "byr")
    {
    $(".eur_toggle").hide();
   $(".usd_toggle").hide();  
    }
});


http://jsfiddle.net/zeppeline/znNkn/1/
Ответить с цитированием