Псевдо-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/ |
zeppeline,
Вариант ... :write:
<!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">
€ 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>
|
Что тут сказать... Действительно — профессор.
рони, спасибо :victory: |
| Часовой пояс GMT +3, время: 04:48. |