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

@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 у меня при нажатии на вторую (третью, пятую, десятую) "галочку" она срабатывает со второго щелчка мыши. Т.е. как бы сначала снимается фокус с выбранной галочки, а по второму щелчку уже работает все остальное... Есть вариант это как-то исправить? С выбором другой категории та же фигня.

Новые блоги и статьи Все статьи Все блоги /
Как дизайн сайта влияет на конверсию: 7 решений, которые реально повышают заявки Neotwalker 08.03.2026 Многие до сих пор воспринимают дизайн сайта как “красивую оболочку”. На практике всё иначе: дизайн напрямую влияет на то, оставит человек заявку или уйдёт через несколько секунд. Даже если у вас. . .	Модульная разработка через nuget packages DevAlt 07.03.2026 Сложившийся в . Net-среде способ разработки чаще всего предполагает монорепозиторий в котором находятся все исходники. При создании нового решения, мы просто добавляем нужные проекты и имеем. . .	Модульный подход на примере F# DevAlt 06.03.2026 В блоге дяди Боба наткнулся на такое определение: В этой книге («Подход, основанный на вариантах использования») Ивар утверждает, что архитектура программного обеспечения — это структуры,. . .	Управление камерой с помощью скрипта OrbitControls.js на Three.js: Вращение, зум и панорамирование 8Observer8 05.03.2026 Содержание блога Финальная демка в браузере работает на Desktop и мобильных браузерах. Итоговый код: orbit-controls-threejs-js. zip. Сканируйте QR-код на мобильном. Вращайте камеру одним пальцем,. . .
SDL3 для Web (WebAssembly): Синхронизация спрайтов SDL3 и тел Box2D 8Observer8 03.03.2026 Содержание блога Финальная демка в браузере. Итоговый код: finish-sync-physics-sprites-sdl3-c. zip На первой гифке отладочные линии отключены, а на второй включены:. . .	SDL3 для Web (WebAssembly): Идентификация объектов на Box2D v3 - использование userData и событий коллизий 8Observer8 02.03.2026 Содержание блога Финальная демка в браузере. Итоговый код: finish-collision-events-sdl3-c. zip Сканируйте QR-код на мобильном и вы увидите, что появится джойстик для управления главным героем. . . .	Реалии Hrethgir 01.03.2026 Нет, я не закончил до сих пор симулятор. Эта задача сложнее. Не получилось уйти в плавсостав, но оно и к лучшему, возможно. Точнее получалось - но сварщиком в палубную команду, а это значит, в моём. . .	Ритм жизни kumehtar 27.02.2026 Иногда приходится жить в ритме, где дел становится всё больше, а вовлечения в происходящее — всё меньше. Плотный график не даёт вниманию закрепиться ни на одном событии. Утро начинается с быстрых,. . .

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

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

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

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