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

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

24.05.2016, 13:54. Показов 1644. Ответов 4
Метки нет (Все метки)

Студворк — интернет-сервис помощи студентам
Здравствуйте.
Пытаюсь придумать, как сделать динамическую кнопку "Применить фильтры", по типу такой как кнопка "Показать" у ДНС или Мвидео. Т.е. выставляем "галочки" возле интересующих нас фильтров, затем формируется ссылка и по клику на нее переходим на стрницу с каталогом, где уже применены выбранные фильтры. Мои "галочки" - не input/checkbox, а просто div-блоки с классами, поэтому нужно как-то привязать к ним действие.
На ум пока ничего особо не пришло... Кто-то сталкивался с подобной задачей?
0
Programming
Эксперт
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
24.05.2016, 13:54
Ответы с готовыми решениями:

Изменение ссылок с onClick
Всем привет! Мне нужно изменить ссылку с href="javascript:void(0);" на ссылку, например:...

Динамическое изменение формы
ситуация такая: человек на страничке заполняет анкету и, среди прочего, указывает город... город...

Динамическое изменение элемента
Вещь такая: Есть таблица, в ней прочерки или цифры от 1 до 10 (в <span>, а <span> в <div>). Если...

Динамическое изменение свойств
Здравствуйте! Помогите разобраться с простой задачей. Необходимо изменить значение display:...

4
2116 / 1186 / 582
Регистрация: 23.08.2015
Сообщений: 3,007
24.05.2016, 15:32 2
А в чем собственно проблема? Фильтры передаете через GET параметры, и исходя из них формируете страницу в PHP.
0
25 / 25 / 5
Регистрация: 13.03.2015
Сообщений: 215
24.05.2016, 16:30  [ТС] 3
Цитата Сообщение от 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" к имеющимся не нужным элементам), то вот со ссылкой "Применить фильтры" пока не ясно...
0
2116 / 1186 / 582
Регистрация: 23.08.2015
Сообщений: 3,007
24.05.2016, 17:00 4
vnmslf, Как правило фильтры передаются обычными GET параметрами типа
site.ru/catalog/?country=canada,usa&factory=coca; Посмотрите в том же Мвидео на адресную строку.
Для выгрузки товаров нужно изменять именно запросы, в зависимости от параметров. Через display:none это извращение, а если у вас постраничная навигация к примеру?
Остается только сформировать ссылку. Лучше конечно использовать формы. С ними проще работать. А что у вас там за div-ы нужно посмотреть.
0
25 / 25 / 5
Регистрация: 13.03.2015
Сообщений: 215
26.05.2016, 09:35  [ТС] 5
На просторах интернета нашел следующее:
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 у меня при нажатии на вторую (третью, пятую, десятую) "галочку" она срабатывает со второго щелчка мыши. Т.е. как бы сначала снимается фокус с выбранной галочки, а по второму щелчку уже работает все остальное... Есть вариант это как-то исправить? С выбором другой категории та же фигня.
0
IT_Exp
Эксперт
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
26.05.2016, 09:35
Помогаю со студенческими работами здесь

Динамическое изменение текста
Есть такая задачка, помогите пожалуйста. Два текста наложенные друг на друга, по очереди...

Динамическое изменение value в кнопке
Есть javascript функция function plus(n) { var price=document.getElementById(&quot;price_&quot;+n); ...

Динамическое изменение onClick
Нахожу в JS элемент по ид, и хочу изменить его onclick. Если без передачи значений то можно...

Динамическое изменение кода
Проблема такая, создаю таблицу из двух колонок: &lt;td&gt;&lt;div id=&quot;info2&quot;&gt;&lt;img...

Изменение цвета ссылок на одной странице
Имеется страница с блоками, которые открываются по нажатию на ссылки, надо сделать, чтобы при...

Динамическое изменение маски
Доброго дня, нужна помощь с компонентом vue-inputmask, используется следующим образом &lt;input type...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
5
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2023, CyberForum.ru