Динамическое изменение ссылок

@vnmslf · Регистрация: 13.03.2015

Студворк — интернет-сервис помощи студентам

Здравствуйте.
Пытаюсь придумать, как сделать динамическую кнопку "Применить фильтры", по типу такой как кнопка "Показать" у ДНС или Мвидео. Т.е. выставляем "галочки" возле интересующих нас фильтров, затем формируется ссылка и по клику на нее переходим на стрницу с каталогом, где уже применены выбранные фильтры. Мои "галочки" - не input/checkbox, а просто div-блоки с классами, поэтому нужно как-то привязать к ним действие.
На ум пока ничего особо не пришло... Кто-то сталкивался с подобной задачей?

@sad67man · 24.05.2016, 15:32

А в чем собственно проблема? Фильтры передаете через GET параметры, и исходя из них формируете страницу в PHP.

@vnmslf · 24.05.2016, 16:30 **[ТС]**

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

А в чем собственно проблема? Фильтры передаете через GET параметры, и исходя из них формируете страницу в PHP.

Проблемы 2:
1) Я не сталкивался ранее с такими вещами;
2) У меня проблема с тем, как динамично менять ссылку на текущей странице: т.е. чтобы человек наведя на нее видел саму будущую ссылку, например, есть без галочек, то ссылка вида "site.ru/catalog", а если с галочками фабрика - "Coca Cola", и страна - "Канада" - то ссылка выглядела бы уже как "site.ru/catalog/0-0-5-2-0-0-0" - т.к. "Coca Cola" в данном случае 5-ая фабрика в списке, а Канада - 2-ая страна. Поскольку в других категориях галочки не были выбраны - вместо них "0". Ну, я к примеру.. Это пока пришло мне в голову.. Но без реализации... Суть еще вся в том, что разумеется на новых таких страницах будет грузиться не весь каталог, а только те товары, которые соответствуют в данном случае фабрике "Coca Cola" и стране "Канада" (назову для простоты эти товары Х)...

И если с выгрузкой товаров Х я вроде бы придумал, как поступить (можно просто менять запрос опять же в зависимости от установленных галочек или даже просто добавлять класс со свойством "display: none" к имеющимся не нужным элементам), то вот со ссылкой "Применить фильтры" пока не ясно...

@sad67man · 24.05.2016, 17:00

vnmslf, Как правило фильтры передаются обычными GET параметрами типа
site.ru/catalog/?country=canada,usa&factory=coca; Посмотрите в том же Мвидео на адресную строку.
Для выгрузки товаров нужно изменять именно запросы, в зависимости от параметров. Через display:none это извращение, а если у вас постраничная навигация к примеру?
Остается только сформировать ссылку. Лучше конечно использовать формы. С ними проще работать. А что у вас там за div-ы нужно посмотреть.

@vnmslf · 26.05.2016, 09:35 **[ТС]**

На просторах интернета нашел следующее:

JavaScript
1
2
3
4
5
6
7
8
9
10
11
// запускаем ajax-запрос, устанавливаем обработчики событий.
// Возвращаемые методом $.get объект сохраним в переменной jqxhr для дальнейшего использования
var jqxhr = $.get("example.php", function() {
  alert("success");
})
.done(function() { alert("second success"); })
.fail(function() { alert("error"); })
.always(function() { alert("finished"); });
 
// установим еще один обработчик завершения запроса
jqxhr.always(function(){ alert("second finished"); });

Не совсем пойму, как в моем случае это должно выглядеть: т.е. и обработчик, и функции должны быть на одной и той же странице.. т.е. у меня это будет выглядеть примерно так:

JavaScript
1
2
3
4
...
var jqxhr = $.get("catalog.php", function() {
...
});

Если можно, подскажите какой-нибудь пример или хотя бы направление, как мне это применить к моим "галочкам".
Сейчас у меня скрипт выглядит так:

Кликните здесь для просмотра всего текста

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
    $(document).ready(function(){
        var iconChange = 0; // переменная для изменения состояния открытого списка на закрытый и обратно
        var factory = 0; // пока что не задействованная переменная
        <?php 
            $result = mysql_query("SELECT MAX(`category_id`) AS max_category FROM `category` ORDER BY `category_id`");
            $res = mysql_fetch_assoc($result);
            $max_category = $res['max_category']; // вытаскиваю количество категорий (в данный момент у меня их 8) 
        ?>
        <?php
            $result = mysql_query("SELECT MAX(`id`) AS max_id FROM `catalogs` WHERE `catalog`='Плитка' ORDER BY `id`"); 
            $res = mysql_fetch_assoc($result);
            $max_id = $res['max_id']; // вытаскиваю количество "галочек" внутри каждой категории
 
            for ($volCategory = 1; $volCategory <= $max_category; $volCategory++) {
                for ($volCheckmark = 1; $volCheckmark <= $max_id; $volCheckmark++) {
                    echo
                        "$('.volCheckmark".$volCategory."-".$volCheckmark."').click(function () {
                            $('.volCheckmark".$volCategory."-".$volCheckmark." .checkbox-v').toggleClass('display display-none');"; 
// собственно, переключатель чекмарков, т.е. "галочек"
                    echo 
                        "$('.marked".$volCategory."-".$volCheckmark."').toggleClass('marked marked-inline-block');
                        });
// далее условие, можно не читать
                    if ($('.marked".$volCategory."-".$volCheckmark."').hasClass('marked')) {
                            $('.new".$volCategory."-".$volCheckmark."').text('Новая Строка 2');
                        } else {
 
                        };";
                };
// далее, если клик на категорию, то открываем данную категорию;
// если клик по "галочке", то галочка отмечена и то, что она отметила высвечивается рядом с наименованием категории;
                echo 
                    "$('.volCategory".$volCategory."').click(function () {
                    if (iconChange == 0) {";
                        for ($i = 1; $i <= $max_category; $i++ ) {
                            if ($i == $volCategory) $i++;
                            echo 
                                "$('.filter-checkbox".$i."').removeClass('zIndex3');
                                $('.filter-name".$i."').removeClass('filter-name-opened').animate({backgroundColor: 'transparent'}, 1);
                                $('.filter-checkbox".$i."').animate({marginTop: '-25px'}, 100).removeClass('display-block');
                                $('.volCategory".$i."').animate({backgroundColor: 'transparent'}, 1);
                                $('.last-mark".$i."').animate({backgroundColor: '#f1f1f1'}, 1);
                                $('.icon-list".$i."').addClass('icon-down');
                                $('.icon-list".$i."').removeClass('icon-up');";
                        };
 
                        echo "$('.filter-checkbox".$volCategory."').addClass('zIndex3');
                        $('.filter-name".$volCategory."').addClass('filter-name-opened').animate({backgroundColor: 'white'}, 1);
                        $('.filter-checkbox".$volCategory."').addClass('display-block').animate({marginTop: '0px'}, 100);
                        $('.volCategory".$volCategory."').animate({backgroundColor: 'white'}, 1);
                        $('.last-mark".$volCategory."').animate({backgroundColor: '#ffffff'}, 1);
                        $('.icon-list".$volCategory."').addClass('icon-up');
                        $('.icon-list".$volCategory."').removeClass('icon-down');
                        iconChange = 1;
                        }
                    else {
                        $('.filter-checkbox".$volCategory."').removeClass('zIndex3');
                        $('.filter-name".$volCategory."').removeClass('filter-name-opened').animate({backgroundColor: 'transparent'}, 1);
                        $('.filter-checkbox".$volCategory."').animate({marginTop: '-25px'}, 100).removeClass('display-block');
                        $('.volCategory".$volCategory."').animate({backgroundColor: 'transparent'}, 1);
                        $('.last-mark".$volCategory."').animate({backgroundColor: '#f1f1f1'}, 1);
                        $('.icon-list".$volCategory."').addClass('icon-down');
                        $('.icon-list".$volCategory."').removeClass('icon-up');
                        iconChange = 0;
                    }
                    });";
            };
        ?>
    });

Выложил текущую версию моей "поделки" на test.tribuna.pro, в надежде, что так будет понятнее о чем идет речь. Могу, разумеется, предоставить еще код самого html/php, если надо...
Вообще идея состоит в том, чтобы переписать один сайт один-в-один. Изначально он написан на laravel + angularjs, я же пишу "ручками" и "костылями".

Заранее спасибо, если натолкнете на мысль

Добавлено через 6 часов 55 минут
Вот еще момент. Я все-таки пока не нашел другое решение, пытаюсь развить свою идею.
При помощи

JavaScript
1
2
3
4
$( init );
        function init() {
            $('.testing').replaceWith( '<div class=\'testing\'><a style=\'color: #222222;\' href=\'/catalog/".$volCategory."-".$volCheckmark."\'>test</a></div>' );
        };

Я могу динамически менять ссылку, т.е. я нажал на 3-ю галочку в 6-ой категории, получил ссылку 6-3, затем нажал на 4-ю галочку во 2-ой категории - получил ссылку 2-4.
Вопрос, если у меня будут ссылки вида: catalog/1-2-3-4-5-6-7-8/ - могу ли я при помощи jQuery заменить не целиком все внутри div с классом testing, а символ, который по счету.. ну скажем.. 25-ый (пофиг какой, по факту-то). В общем, вкратце: можно ли заменить определенный(ые) символ(ы)?

Добавлено через 37 минут
На данный момент написал следующее:

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
$('.volCheckmark".$volCategory."-".$volCheckmark."').click(function () {
    if (markChange == 0) {
        $('.volCheckmark".$volCategory."-".$volCheckmark." .checkbox-v').addClass('display');
        $('.volCheckmark".$volCategory."-".$volCheckmark." .checkbox-v').removeClass('display-none');
        $('.marked".$volCategory."-".$volCheckmark."').addClass('marked-inline-block');
        $('.marked".$volCategory."-".$volCheckmark."').removeClass('marked');
        markChange = 1;
 
        $( init );
        function init() { 
            var a = '<div class=\'testing\'><a style=\'color: #222222;\' href=\'/catalog/0-0-0-0-0-0-0-0/\'>test!</a></div>';
            var b = a.split('');
            var c = 61 + 2*".$volCategory.";
            b[c] = '".$volCheckmark."';
            a = b.join('');
            alert(a);
            $('.testing').replaceWith( a );
        };
 
    } else {
        $('.volCheckmark".$volCategory."-".$volCheckmark." .checkbox-v').addClass('display-none');
        $('.volCheckmark".$volCategory."-".$volCheckmark." .checkbox-v').removeClass('display');
        $('.marked".$volCategory."-".$volCheckmark."').addClass('marked');
        $('.marked".$volCategory."-".$volCheckmark."').removeClass('marked-inline-block');
        markChange = 0;
 
        $( init );
        function init() {
            var a = '<div class=\'testing\'><a style=\'color: #222222;\' href=\'/catalog/0-0-0-0-0-0-0-0/\'>test!</a></div>';
            var b = a.split('');
            var c = 61 + 2*".$volCategory.";
            b[c] = '0';
            a = b.join('');
            alert(a);
            $('.testing').replaceWith( a );
        };
 
    }

И сейчас у меня заменяются нужные мне символы, но: 1) не знаю как сделать, чтобы вместо 1-го символа писалось несколько (если отметить несколько галочек), 2) и не знаю, как "вернуть" предыдущее значение, пока что у меня при снятии "галочки" состояние возвращается в '0'...

Добавлено через 15 часов 46 минут
Еще вопрос в догонку. Когда у меня классы переключались по клику через toggleClass при нажатии на другую "галочку" она сразу же изменяла состояние. Теперь же, через addClass/removeClass у меня при нажатии на вторую (третью, пятую, десятую) "галочку" она срабатывает со второго щелчка мыши. Т.е. как бы сначала снимается фокус с выбранной галочки, а по второму щелчку уже работает все остальное... Есть вариант это как-то исправить? С выбором другой категории та же фигня.

Новые блоги и статьи Все статьи Все блоги /
Новый CodeBlocs. Версия 25.03 palva 04.01.2026 Оказывается, недавно вышла новая версия CodeBlocks за номером 25. 03. Когда-то давно я возился с только что вышедшей тогда версией 20. 03. С тех пор я давно снёс всё с компьютера и забыл. Теперь. . .	Модель микоризы: классовый агентный подход anaschu 02.01.2026 Раньше это было два гриба и бактерия. Теперь три гриба, растение. И на уровне агентов добавится между грибами или бактериями взаимодействий. До того я пробовал подход через многомерные массивы,. . .	Советы по крайней бережливости. Внимание, это ОЧЕНЬ длинный пост. Programma_Boinc 28.12.2025 Советы по крайней бережливости. Внимание, это ОЧЕНЬ длинный пост. Налог на собак: https:/ / ********/ gallery/ V06K53e Финансовый отчет в Excel: https:/ / ********/ gallery/ bKBkQFf Пост отсюда. . .	Кто-нибудь знает, где можно бесплатно получить настольный компьютер или ноутбук? США. Programma_Boinc 26.12.2025 Нашел на реддите интересную статью под названием Anyone know where to get a free Desktop or Laptop? Ниже её машинный перевод. После долгих разбирательств я наконец-то вернула себе. . .	Thinkpad X220 Tablet — это лучший бюджетный ноутбук для учёбы, точка. Programma_Boinc 23.12.2025 Рецензия / Мнение/ Перевод Нашел на реддите интересную статью под названием The Thinkpad X220 Tablet is the best budget school laptop period . Ниже её машинный перевод. Thinkpad X220 Tablet —. . .
PhpStorm 2025.3: WSL Terminal всегда стартует в ~ and_y87 14.12.2025 PhpStorm 2025. 3: WSL Terminal всегда стартует в ~ (home), игнорируя директорию проекта Симптом: После обновления до PhpStorm 2025. 3 встроенный терминал WSL открывается в домашней директории. . .	Как объединить две одинаковые БД Access с разными данными VikBal 11.12.2025 Помогите пожалуйста !! Как объединить 2 одинаковые БД Access с разными данными.	Новый ноутбук volvo 07.12.2025 Всем привет. По скидке в "черную пятницу" взял себе новый ноутбук Lenovo ThinkBook 16 G7 на Амазоне: Ryzen 5 7533HS 64 Gb DDR5 1Tb NVMe 16" Full HD Display Win11 Pro	Музыка, написанная Искусственным Интеллектом volvo 04.12.2025 Всем привет. Некоторое время назад меня заинтересовало, что уже умеет ИИ в плане написания музыки для песен, и, собственно, исполнения этих самых песен. Стихов у нас много, уже вышли 4 книги, еще 3. . .	От async/await к виртуальным потокам в Python IndentationError 23.11.2025 Армин Ронахер поставил под сомнение async/ await. Создатель Flask заявляет: цветные функции - провал, виртуальные потоки - решение. Не threading-динозавры, а новое поколение лёгких потоков. Откат?. . .

@vnmslf 25 / 25 / 5 Регистрация: 13.03.2015 Сообщений: 215

	Динамическое изменение ссылок 24.05.2016, 13:54. Показов 2135. Ответов 4 Метки нет (Все метки) Здравствуйте. Пытаюсь придумать, как сделать динамическую кнопку "Применить фильтры", по типу такой как кнопка "Показать" у ДНС или Мвидео. Т.е. выставляем "галочки" возле интересующих нас фильтров, затем формируется ссылка и по клику на нее переходим на стрницу с каталогом, где уже применены выбранные фильтры. Мои "галочки" - не input/checkbox, а просто div-блоки с классами, поэтому нужно как-то привязать к ним действие. На ум пока ничего особо не пришло... Кто-то сталкивался с подобной задачей? 0

@sad67man 2603 / 1507 / 689 Регистрация: 23.08.2015 Сообщений: 3,814
	24.05.2016, 15:32
	А в чем собственно проблема? Фильтры передаете через GET параметры, и исходя из них формируете страницу в PHP. 0

@sad67man 2603 / 1507 / 689 Регистрация: 23.08.2015 Сообщений: 3,814
	24.05.2016, 17:00
	vnmslf, Как правило фильтры передаются обычными GET параметрами типа site.ru/catalog/?country=canada,usa&factory=coca; Посмотрите в том же Мвидео на адресную строку. Для выгрузки товаров нужно изменять именно запросы, в зависимости от параметров. Через display:none это извращение, а если у вас постраничная навигация к примеру? Остается только сформировать ссылку. Лучше конечно использовать формы. С ними проще работать. А что у вас там за div-ы нужно посмотреть. 0