Помогите решить проблему с ссылками.
Добрый день, форумчане)
У меня такой вопрос у себя на сайте я сформировал две ссылки. Сортировка: "по возрастанию" и "по убыванию". Нужно сделать чтобы это делала одна ссылка. Например первый раз нажимаем, товар ищется "по убыванию" жмём второй раз по этой же ссылке товар ищется уже "по возрастанию".
<style>
body {background:#ebebeb;}
#content {margin:40px 0 0 40px;}
.switch{
border:none;
background:left no-repeat;
width:105px;
height:46px;
padding:0;
margin:0;
}
.on, .off{
width:50px;
height:40px;
display:inline-block;
cursor:pointer;
}
.result{display:none; margin-top:5px; font-size:14px; color:#333;}
.result span{color:#C03; font-weight:700;}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.switch').css('background', 'url("switch.png")');
$('.on_off').css('display','none');
$('.on, .off').css('text-indent','-10000px');
$("input[name=on_off]").change(function() {
var button = $(this).val();
if(button == 'off'){ $('.switch').css('background-position', 'right'); }
if(button == 'on'){ $('.switch').css('background-position', 'left'); }
$('.result span').html(button);
$('.result').fadeIn();
});
});
</script>
</head>
<body>
<div class="topHeader">
<a class="backArticle" href="http://pcvector.net/scripts/layout_and_interface/294-pereklyuchatel-na-jquery.html">Назад к статье >>></a>
</div>
<div id="content">
<form action="" method="get">
<fieldset class="switch">
<label class="off"><a <?if ($_GET["sort"] == "catalog_PRICE_1"):?> class="actived" <?endif;?> href="<?=$arResult["SECTION_PAGE_URL"]?>?sort=catalog_PRICE_1&method=asc"> Цене asc</a><input type="radio" class="on_off" name="on_off" value="off"/></label>
<label class="on"><a <?if ($_GET["sort"] == "catalog_PRICE_1"):?> class="actived" <?endif;?> href="<?=$arResult["SECTION_PAGE_URL"]?>?sort=catalog_PRICE_1&method=desc"> Цене desc</a> <input type="radio" class="on_off" name="on_off" value="on"/></label>
</fieldset>
</form>
Что-то на подобии такого пробовал и это наверное не единственный был вариант. Но думаю вы можете предложить ещё более лучший вариант. Спасибо заранее) |
Цитата:
<!DOCTYPE html>
<html ng-app>
<head>
<script src='http://code.jquery.com/jquery-latest.js'></script>
<!--
<script src="http://code.angularjs.org/1.1.4/angular.min.js"></script>
<link rel='stylesheet type=text/css href=tmp.css' />
-->
<style type='text/css'>
</style>
<script type='text/javascript'>
$(function(){
$('#btn').click(function(){
if ($(this).text()=='По убыванию') {
$(this).text('По возрастанию');
} else {
$(this).text('По убыванию');
};
});
});
</script>
</head>
<body>
<a id="btn" href="javascript:void(0);">По убыванию</a>
</body>
</html>
|
Спасибо Вам большое, сейчас попробую)
|
А как туда <a href="наш адрес_asc">По возрастанию</a> повесить, чтобы и он тоже был?
|
Bananza, я не понял вопроса... :no:
|
Ну чтобы не только название менялось но и по ссылке пройтись можно было.
|
Цитата:
Так ты там в скрипте все и делай. Тебе сортировать надо или по ссылке ходить? |
Думал так поступить.
</style>
<script type='text/javascript'>
$(function(){
$('#btn').click(function(){
if ($(this).text()=='По убыванию').location.href = "<?=$arResult['SECTION_PAGE_URL']?>?sort=catalog_PRICE_1&method=asc>"{
$(this).text('По возрастанию').location.href = "<?=$arResult['SECTION_PAGE_URL']?>?sort=catalog_PRICE_1&method=desc>";
} else {
$(this).text('По убыванию').location.href = "<?=$arResult['SECTION_PAGE_URL']?>?sort=catalog_PRICE_1&method=asc>";
};
});
});
</script>
</head>
<body>
<a id="btn" href="javascript:void(0);">По убыванию</a>
|
Цитата:
|
Да согласен каша, нужно сравнивать a href и производить замену в строке
$("a[href='http://diagonals.ru/catalog/123/?sort=catalog_PRICE_1&method=asc']").attr('href', 'http://diagonals.ru/catalog/123/?sort=catalog_PRICE_1&method=desc');
с asc на desc. Ваш пример кода мне в помощь. |
Bananza, оставь в покое ссылку... :)
<!DOCTYPE html>
<html ng-app>
<head>
<script src='http://code.jquery.com/jquery-latest.js'></script>
<!--
<script src="http://code.angularjs.org/1.1.4/angular.min.js"></script>
<link rel='stylesheet type=text/css href=tmp.css' />
-->
<style type='text/css'>
</style>
<script type='text/javascript'>
$(function(){
$('#btn').click(function(){
if ($(this).text()=='По убыванию') {
$(this).text('По возрастанию');
top.location='http://diagonals.ru/catalog/123/?sort=catalog_PRICE_1&method=asc';
} else {
$(this).text('По убыванию');
top.location='http://diagonals.ru/catalog/123/?sort=catalog_PRICE_1&method=desc';
};
});
});
</script>
</head>
<body>
<a id="btn" href="javascript:void(0);">По убыванию</a>
</body>
</html>
|
| Часовой пояс GMT +3, время: 06:34. |