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

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

28.09.2017, 18:21. Просмотров 751. Ответов 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
Ответы с готовыми решениями:

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

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

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

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

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

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

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

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

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


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

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

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