Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #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/
Ответить с цитированием
  #2 (permalink)  
Старый 12.04.2014, 14:12
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,084

zeppeline,
Вариант ...
<!DOCTYPE html>

<html>
<head>
 <meta charset="utf-8">
  <title>- jsFiddle demo by zeppeline</title>
  <script type='text/javascript' src='http://code.jquery.com/jquery-1.9.1.js'>
</script>

  <style type='text/css'>
    .price div:nth-child(n+2),.toggle_sheet div:nth-child(n+2){
      display: none;
    }
    .toggle_sheet:hover div{
       display: block;
    }

  </style>
  <script>
 $(window).load(function () {
     var curr = ".byr_toggle",
         $price = $(".price>"),
         $sheet = $(".toggle_sheet>");
     $(".toggle_sheet").on("click", ">", function (event) {
         event.preventDefault();
         var indx = $sheet.index(this);
         $(".toggle_sheet").prepend($(this));
         $(".price").prepend($price.eq(indx));
     })
     $(curr).trigger("click")
 });
  </script>
</head>

<body>
  <div id="multiprice">
    <div class="price" style="float:left">
      <div class="usd_price">
        $ 69
      </div>

      <div class="eur_price">
        &euro; 50
      </div>

      <div class="byr_price">
        495000
      </div>
    </div>

    <div class="toggle_sheet" style="float:left; margin:6px;">
      <div class="usd_toggle" >
        <a href="#">USD</a>
      </div>

      <div class="eur_toggle" >
        <a href="#">EUR</a>
      </div>

      <div class="byr_toggle">
        <a href="#">BYR</a>
      </div>
    </div>
  </div>
</body>
</html>
Ответить с цитированием
  #3 (permalink)  
Старый 14.04.2014, 14:37
Новичок на форуме
Отправить личное сообщение для zeppeline Посмотреть профиль Найти все сообщения от zeppeline
 
Регистрация: 11.06.2013
Сообщений: 2

Что тут сказать... Действительно — профессор.
рони, спасибо
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
изменение input.value по клику farik Events/DOM/Window 3 13.07.2014 12:15
Изменение порядка расположения элементов Sergeizd Элементы интерфейса 3 27.10.2013 20:28
запретить изменение количество элементов в списке Antistas jQuery 0 05.12.2012 14:05
Изменение множества элементов Input по определённом призна Лавсановые Волокна Элементы интерфейса 1 24.12.2010 10:37
Изменение и отображение значения переменной по клику Allan Stark Общие вопросы Javascript 1 25.04.2010 15:50