Форум программистов, компьютерный форум, киберфорум
Наши страницы
JavaScript
Войти
Регистрация
Восстановить пароль
 
Disaine
0 / -1 / 7
Регистрация: 08.03.2017
Сообщений: 124
#1

Hlpyite ИЗМЕНИТЬ скрипт фильтра! - JavaScript

28.09.2017, 18:21. Просмотров 144. Ответов 10

Как сделать скрипт, который будет скрывать блок с class="HideInBlock". Но это не простой фильтр, надо, чтобы этот скрипт срабатывал при нажатии на checkbox.

Javascript
1
2
3
4
5
6
$('input[type="checkbox"]').on('change', function() {
  var that = this;
  $('ul.nav-tabs li').each(function() {
    if ($(this).find('h4').text() == $(that).parent().text()) $(that).prop('checked') ? $(this).show() : $(this).hide();
  });
});
HTML5
1
2
3
4
5
6
<div class="row"> 
            <div class="col-lg-12 col-md-12 col-xs-12 col-sm-12"><div style="border-radius: 5px 5px 5px 5px;background-color: #FFDAB9; width: 366px; height: 20px; box-shadow: 0 0 30px rgba(0,0,0,0.5);"><span style="padding-left: 7px">   - Печи, работающие на газе[Ещё и на дровах].</span></div></div>
        </div><br>
        <div class="row">
            <div class="col-lg-12 col-md-12 col-xs-12 col-sm-12"><div style="border-radius: 5px 5px 5px 5px;background-color: #FFFFFF; width: 366px; height: 20px; box-shadow: 0 0 30px rgba(0,0,0,0.5);"><span style="padding-left: 7px">   - Печи, работающие только на дровах.</span></div></div>
        </div><br>
HTML5
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
<!--1 Товар-->
                        <div class="col-lg-4 col-md-4 col-xs-6 col-sm-6 HideInBlock"><br>
                            <div align="center" style="width: 100%; height: auto; background-color: white; border-radius: 5px 5px 5px 5px; box-shadow: 0 0 30px rgba(0,0,0,0.5); background-color: #FFDAB9;">
                                <img class="IMG_PECH" src="images/pech-po-20-gt.png">
                                <h4 class="text-center" style="font-family: OpenSans ExtraBold;">Печь ПО-20 ГТ</h4>
                                <h5 class="text-center" style="font-family: OpenSans ExtraBold;">Объём парилки, м3:</h5>
                                <h4 class="text-center" style="font-family: OpenSans ExtraBold;"><small>до 20</small></h4>
 
                                <h5 class="text-center" style="font-family: OpenSans ExtraBold;">Вес печи, кг:</h5>
                                <h4 class="text-center" style="font-family: OpenSans ExtraBold;"><small>85</small></h4>
 
                                <h5 class="text-center" style="font-family: OpenSans ExtraBold;">Камни, кг:</h5>
                                <h4 class="text-center" style="font-family: OpenSans ExtraBold;"><small>50</small></h4>
 
                                <h5 class="text-center" style="font-family: OpenSans ExtraBold;">Размер, ШГ—ГГ—В:</h5>
                                <h4 class="text-center" style="font-family: OpenSans ExtraBold;"><small>540х630х800</small></h4>
 
                                <h5 class="text-center" style="font-family: OpenSans ExtraBold;">Вид топлива:</h5>
                                <h4 class="text-center" style="font-family: OpenSans ExtraBold;"><small>сетевой газ, дрова</small></h4>
 
                                <h5 class="text-center" style="font-family: OpenSans ExtraBold;">Цена:</h5>
                                <h4 class="text-center" style="font-family: OpenSans ExtraBold;"><small>12600<glyphicon class="glyphicon glyphicon-rub"></glyphicon></small></h4>
 
                                <button class="btn btn-link Pech-po-20-gt-1" style="background: none; background-color: red; color: white; border-color: red; border-radius: 5px 5px 5px 5px; text-decoration: none; width: 90%;"><h4 class="text-center">
                                    Заказать</h4>
                                </button><br><br>
 
                            </div>
                        </div>
0
Лучшие ответы (1)
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
Similar
Эксперт
41792 / 34177 / 6122
Регистрация: 12.04.2006
Сообщений: 57,940
28.09.2017, 18:21
Я подобрал для вас темы с готовыми решениями и ответами на вопрос Hlpyite ИЗМЕНИТЬ скрипт фильтра! (JavaScript):

Изменить скрипт
Всем привет! Помогите много уважаемые форумчане. Нужен скрипт который будет...

не получается изменить скрипт
Всем доброго времени суток. Проблема в следующем...Нужно сменить выбор...

Как изменить скрипт?
Добрый вечер, господа. Нужна помощь по скрипту для часов. Вот скрипт: ...

Как изменить JS скрипт, что бы кнопки на слайд шоу работали как "предыдущая" и "следующая"
Есть такой вот JS скриптик var imgs = ; var text = ; var n=0; time=800;...

Необходимо вставить в скрипт увеличения картинки, скрипт просмотра панорамы 360
Здравствуйте. У меня такой специфический вопрос, на моем сайте имеется скрипт...

Вызвать скрипт через другой скрипт
Всем привет! Такая ситуация. Есть скрипт 1, который служит для аякс подгрузки...

10
MrOnlineCoder
Всегда онлайн
399 / 355 / 133
Регистрация: 07.04.2013
Сообщений: 1,659
Завершенные тесты: 2
29.09.2017, 11:32 #2
Цитата Сообщение от Disaine Посмотреть сообщение
Как сделать скрипт, который будет скрывать блок с class="HideInBlock". Но это не простой фильтр, надо, чтобы этот скрипт срабатывал при нажатии на checkbox.
Javascript
1
2
3
$('input[type="checkbox"]').on('change', function() {
  $('.HideInBlock').hide();
});
0
Disaine
0 / -1 / 7
Регистрация: 08.03.2017
Сообщений: 124
29.09.2017, 17:15  [ТС] #3
А как прикрепить его к Checkbox? Надо, чтобы при нажатии определенного checkbox срабатывал скрипт.
0
MrOnlineCoder
Всегда онлайн
399 / 355 / 133
Регистрация: 07.04.2013
Сообщений: 1,659
Завершенные тесты: 2
29.09.2017, 18:30 #4
Disaine, дайте чекбоксу ID и выбирайте элементы по ID.
0
Disaine
0 / -1 / 7
Регистрация: 08.03.2017
Сообщений: 124
29.09.2017, 18:52  [ТС] #5
А как выбрать id? $('#id')?
0
MrOnlineCoder
Всегда онлайн
399 / 355 / 133
Регистрация: 07.04.2013
Сообщений: 1,659
Завершенные тесты: 2
29.09.2017, 19:11 #6
Disaine, совершенно верно
0
Disaine
0 / -1 / 7
Регистрация: 08.03.2017
Сообщений: 124
29.09.2017, 19:27  [ТС] #7
А не подскажите в каком месте это расположить?
0
MrOnlineCoder
Всегда онлайн
399 / 355 / 133
Регистрация: 07.04.2013
Сообщений: 1,659
Завершенные тесты: 2
29.09.2017, 19:57 #8
Disaine, можно в тег <script> перед </body>
0
Disaine
0 / -1 / 7
Регистрация: 08.03.2017
Сообщений: 124
29.09.2017, 20:00  [ТС] #9
Нет, я имел ввиду, куда
Цитата Сообщение от Disaine Посмотреть сообщение
$('#id')?
вставить в
Цитата Сообщение от MrOnlineCoder Посмотреть сообщение
$('input[type="checkbox"]').on('change', function() {
* $('.HideInBlock').hide();
})
?
0
MrOnlineCoder
Всегда онлайн
399 / 355 / 133
Регистрация: 07.04.2013
Сообщений: 1,659
Завершенные тесты: 2
29.09.2017, 20:04 #10
Лучший ответ Сообщение было отмечено Disaine как решение

Решение

Disaine, input[type="checkbox"] заменить на #id:
Javascript
1
2
3
$('#id').on('change', function() {
* $('.HideInBlock').hide();
})
0
Disaine
0 / -1 / 7
Регистрация: 08.03.2017
Сообщений: 124
02.10.2017, 16:43  [ТС] #11
Все ещё не работает.

DIV
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<div class="col-lg-3 col-sm-6 col-xs-6 col-md-3">
 
                <div class="checkbox" style="margin-top: 0; padding-top: 0; padding: 15px; font-family: OpenSans ExtraBold;">
                <label id="allgazandwood"><input type="checkbox" checked>Печи, работающие на газy и дровах</input></label>
                </div>
 
            </div>
 
            <div class="col-lg-3 col-sm-6 col-xs-6 col-md-3">
 
                <div class="checkbox" style="margin-top: 0; padding-top: 0; padding: 15px; font-family: OpenSans ExtraBold;">
                <label id="onlywood"><input type="checkbox" checked>Печи, работающие <b>только</b> на дровах</input></label>
                </div>
 
            </div>

Checkbox
HTML5
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
<div class="col-lg-4 col-md-4 col-xs-6 col-sm-6"><br>
                        <div align="center" class="HideInBlockOnlyGaz" style="width: 100%; height: auto; background-color: white; border-radius: 5px 5px 5px 5px; box-shadow: 0 0 30px rgba(0,0,0,0.5);">
                            <img class="IMG_PECH" src="images/atb-2-ch-20-60.jpg">
                            <h4 class="text-center" style="font-family: OpenSans ExtraBold;">АТБ-2-ЧВ-20-60</h4>
                            <h5 class="text-center" style="font-family: OpenSans ExtraBold;">Объём парилки, м3:</h5>
                            <h4 class="text-center" style="font-family: OpenSans ExtraBold;"><small>до 20</small></h4>
 
                            <h5 class="text-center" style="font-family: OpenSans ExtraBold;">Вес печи, кг:</h5>
                            <h4 class="text-center" style="font-family: OpenSans ExtraBold;"><small>141</small></h4>
 
                            <h5 class="text-center" style="font-family: OpenSans ExtraBold;">Камни, кг:</h5>
                            <h4 class="text-center" style="font-family: OpenSans ExtraBold;"><small>60</small></h4>
 
                            <h5 class="text-center" style="font-family: OpenSans ExtraBold;">Размер, ШГ—ГГ—В:</h5>
                            <h4 class="text-center" style="font-family: OpenSans ExtraBold;"><small>63x63x103</small></h4>
 
                            <h5 class="text-center" style="font-family: OpenSans ExtraBold;">Вид топлива:</h5>
                            <h4 class="text-center" style="font-family: OpenSans ExtraBold;"><small>дрова</small></h4>
 
                            <h5 class="text-center" style="font-family: OpenSans ExtraBold;">Цена:</h5>
                            <h4 class="text-center" style="font-family: OpenSans ExtraBold;"><small>45000<glyphicon class="glyphicon glyphicon-rub"></glyphicon></small></h4>
 
                            <button class="btn btn-lin Atb-2-ch-20-60" style="background: none; background-color: red; color: white; border-color: red; border-radius: 5px 5px 5px 5px; text-decoration: none; width: 90%;"><h4 class="text-center">
                                Заказать</h4>
                            </button><br><br>
 
                        </div>
                    </div>
SCRIPT
Javascript
1
2
3
4
5
6
7
$('#allgazandwood').on('change', function() {
* $('.HideInBlockGazAndWood').hide();
});
 
$('#onlywood').on('change', function() {
* $('.HideInBlockOnlyGaz').hide();
});
0
02.10.2017, 16:43
MoreAnswers
Эксперт
37091 / 29110 / 5898
Регистрация: 17.06.2006
Сообщений: 43,301
02.10.2017, 16:43
Привет! Вот еще темы с решениями:

Изменить скрипт для добавления друзей на фейсбук
// Run at this location: https://www.facebook.com/?sk=ff var addFriendsCount...

Изменить размер окно медиального фильтра
Есть код, помогите изменить окно с &quot;3х3&quot; на &quot;3х1&quot;. //Функция для удобства...

Скрипт перестает работать после применения фильтра в форме
Добрый день, форумчане. В javascript очень слаб, так что сильно не пинайте,...

Ошибка при наложении программного фильтра и фильтра на форме
Добрый день, на форме программно устанавливается фильтр записей - все хорошо....


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

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

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2018, vBulletin Solutions, Inc.
Рейтинг@Mail.ru