Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Скрыть показать блок при выбора пункта из списка (https://javascript.ru/forum/dom-window/41663-skryt-pokazat-blok-pri-vybora-punkta-iz-spiska.html)

рони 11.06.2014 01:11

AnimalInstinct,
мда --- вы запускаите скрипт когда элементов нет на странице -- в окне Result находится код который запускает ваш скрипт когда страница готова .
вот так можно
$(function () {
     $('#term, #season').on('change', function () {
         $('div[id^="ad_"]:gt(3)').css("display", "none");

         var term = $.trim($('#term :selected').text().toLowerCase()),
             season = $.trim($('#season :selected').text().toLowerCase());
         if ($('#term :selected').val() > 0 && $('#season :selected').val() > 0) {
             var $sel = '#ad_' + season + term;
             $($sel).css("display", "block");

         }

     });
 });

AnimalInstinct 11.06.2014 10:19

Цитата:

Сообщение от рони (Сообщение 316029)
AnimalInstinct,
мда --- вы запускаите скрипт когда элементов нет на странице -- в окне Result находится код который запускает ваш скрипт когда страница готова .
вот так можно
$(function () {
     $('#term, #season').on('change', function () {
         $('div[id^="ad_"]:gt(3)').css("display", "none");

         var term = $.trim($('#term :selected').text().toLowerCase()),
             season = $.trim($('#season :selected').text().toLowerCase());
         if ($('#term :selected').val() > 0 && $('#season :selected').val() > 0) {
             var $sel = '#ad_' + season + term;
             $($sel).css("display", "block");

         }

     });
 });

Спасибо вам огромное! Вы меня осчастливили просто! :thanks: :dance: Все заработало! :)

рони 11.06.2014 10:24

AnimalInstinct,
jquery грузить несколько раз на странице тоже бы ненужно - но это долгая история и начать её нужно хотябы отсюда http://learn.javascript.ru/

AnimalInstinct 11.06.2014 10:43

Да, я только начинаю знакомство с Javacsript, сейчас вот Codeacademy прохожу :) Вообще сайтами уже третий год занимаюсь, но скриптами все время чужими пользовался и не понимал как они работают, сейчас буду матчасть изучать, ибо понимаю что без JS уже как без рук. Несколько раз загружено так как я уже все начал перебирать, думаю остановлюсь на загрузке 1.11.1 c Google.

AnimalInstinct 11.06.2014 14:53

Странно, но когда в select меняешь текст, не значение, а содержимое блока, с английского на русский, то почему то перестает работать. Не знаете в чем может быть дело?

var term   = $.trim( $('#term :selected').text().toLowerCase() ),
      season = $.trim( $('#season :selected').text().toLowerCase() );


Я подозреваю что вот тут присваивает переменным значение содержимого блока, можно ли как то на select и его value переделать?

рони 11.06.2014 15:31

AnimalInstinct,
$('#term').val().toLowerCase()

AnimalInstinct 11.06.2014 16:14

Так, value не вариант , он нужен цифровой, наверное не value а label нужно использовать. Вот последний вариант на русском языке, может кому еще пригодится.

На Fiddle

AnimalInstinct 12.06.2014 10:57

Немного не в тему, но как можно объединить эти ID в один, чтобы скрипт это понял?

#ad_lowmonth,
#ad_lowweek,
#ad_lowday,
#ad_hightmonth,
#ad_hightweek,
#ad_hightday,
#ad_peakmonth,
#ad_peakweek,
#ad_peakday

Решил добавить UI slider, а поля ввода скрыть, но для каждого слайдера приходится писать свою функцию, как бы все это объединить в одну? Вот тут пример На JsFiddle

рони 12.06.2014 11:04

AnimalInstinct,
1 присвоить класс
или в кавычках через запятую
$('#ad_lowmonth, #ad_lowweek, #ad_lowday, #ad_hightmonth, #ad_hightweek, #ad_hightday, #ad_peakmonth,
#ad_peakweek,
#ad_peakday')
или $('[id^="ad_"]')

AnimalInstinct 12.06.2014 17:49

Пришлось все таки делать отдельную функцию для каждого слайдера, так как поля то разные, всего 18 полей.

Осталось дело за малым :) Теперь когда выбираешь например Неделя->Высокий сезон , а потом не переключая неделю выбираем Низкий сезон, то добавляется еще один слайдер, а тот который высокий сезон не исчезает, как бы сделать так чтобы он все таки исчезал по нормальному, чтобы показывался только один DIV?

Код сегодня тут на Codepen так как JsFiddle весь день висит :)


Часовой пояс GMT +3, время: 13:00.