Форум

Bananza · #1 (**permalink**) 05.02.2015, 12:21

Добрый день, форумчане)
У меня такой вопрос у себя на сайте я сформировал две ссылки. Сортировка: "по возрастанию" и "по убыванию".
Нужно сделать чтобы это делала одна ссылка.
Например первый раз нажимаем, товар ищется "по убыванию" жмём второй раз по этой же ссылке товар ищется уже "по возрастанию".

<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">Назад к статье &gt;&gt;&gt;</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>

Что-то на подобии такого пробовал и это наверное не единственный был вариант. Но думаю вы можете предложить ещё более лучший вариант.
Спасибо заранее)

ksa · #2 (**permalink**) 05.02.2015, 13:32

Сообщение от 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('По возрастанию');
		} else {
			$(this).text('По убыванию');
		};
	});
});
</script>
</head>
<body> 
<a id="btn" href="javascript:void(0);">По убыванию</a>
</body>
</html>

Bananza · #3 (**permalink**) 05.02.2015, 14:27

Спасибо Вам большое, сейчас попробую)

Bananza · #4 (**permalink**) 05.02.2015, 15:32

А как туда <a href="наш адрес_asc">По возрастанию</a> повесить, чтобы и он тоже был?

ksa · #5 (**permalink**) 05.02.2015, 15:34

Bananza, я не понял вопроса...

Bananza · #6 (**permalink**) 05.02.2015, 15:38

Ну чтобы не только название менялось но и по ссылке пройтись можно было.

ksa · #7 (**permalink**) 05.02.2015, 15:41

Сообщение от Bananza

но и по ссылке пройтись можно было

Фигасе!

Так ты там в скрипте все и делай. Тебе сортировать надо или по ссылке ходить?

Bananza · #8 (**permalink**) 05.02.2015, 15:48

Думал так поступить.

</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>

ksa · #9 (**permalink**) 05.02.2015, 16:34

Сообщение от Bananza

Думал так поступить

Твой пример каша какая-то...

Bananza · #10 (**permalink**) 06.02.2015, 09:18

Да согласен каша, нужно сравнивать 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. Ваш пример кода мне в помощь.

Форум

Справочник

Discord чат

Курсы javascript