Совет по JQuery

Автор nike2012, 22-08-2012, 22:39:03

« назад - далее »

nike2012Topic starter

Привет всем! Нужен совет по джейквери, суть такова: есть скрипт (ниже предоставлена часть кода), в нем определяется определенный класс, нужно  добавить еще один. Однако я не совсем понимаю как это сделать. Есть альтернатива - написать такой же скрип но с другим классом, однако я думаю это негативно отразится на времени загрузки страницы (кстати, на сколько я осведомлен, джейквери работает на стороне пользователя, т.е. никакой нагрузки на сервер не несет! Я прав?)
Вот часть кода:
var beingShown = false;
            var shown = false;
            var trigger = $('.trigger', this);
            var info = $('.moyklass.', this).css('opacity', 0);

Нужно чтобы там был еще один класс, пробовал через запятую пробовал вообще скопировать только эту часть кода - все перепробовал результат ноль. Если скопировать весь скрипт и поменять на нужный нам класс, то, достигается необходимый эффект.

Вопрос: можно туда как-то прописать еще один класс, то есть чтоб эта функция применялась к двум классам? Если нет, то при дублировании скрипт может негативно оказывать влияние на нагрузку сервера?

Заранее благодарю всех кто попытается помочь!
  •  


parmactep

var beingShown = false;
            var shown = false;
            var trigger = $('.trigger', this);
            var info = $('.moyklass.', this).css('opacity', 0);

Во-первых: не вижу где здесь определяется класс...
Во-вторых: какую именно функцию вы имеете ввиду, когда говорите о том что она должна применятся?
Если мне не изменяют экстрасенсорные способности, то вы имели ввиду вот так?
var beingShown = false;
            var shown = false;
            var trigger = $('.trigger', this);
            var info = $('.moyklass.', this).css('opacity', 0);
            var info1 = $('.moydrugoiklass.', this).css('opacity', 0);

Дополнительной нагрузки на сервер никакой... Вы совершенно правильно осведомлены о том что jQuery выполняется на стороне клиента....
  •  


Cergo

У меня, то же вопрос по jquery.
Я спрятал в спойлер, у себя на сайте, клипы с ютуба при помощи скрита:

$(document).ready(function(){
    $("#klip p").click(function(){
        $('.spo').slideUp("slow");
      $('.spo').hide();
      $(this).next("div").slideToggle("slow");
      });
   });


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

Переписал скрипт с id, но получилось громоздко.
Пришлось назначать id для каждого клипа.

$(document).ready(function(){
       $("#klips p#im1").click(function(){
      $('.spoyl iframe').slideUp("slow");
      $('.spoyl iframe#vid1').slideToggle("slow");
      });
      $("#klips p#im2").click(function(){
      $('.spoyl iframe').slideUp("slow");
      $('.spoyl iframe#vid2').slideToggle("slow");
      });

(...........................и...т...д...................................)

      $("#klips p#im30").click(function(){
      $('.spoyl iframe').slideUp("slow");
      $('.spoyl iframe#vid30').slideToggle("slow");
      });
   });

Пока их 30, это терпимо, а когда будет 130...
Нужен совет, как сократить скрипт.

И еще, при открытии нового спойлера, предыдущий закрываются, но его звучание продолжается. Как его отключить.
IE6 вообще ведет себя странно, давишь на название, а он открывает, то что вздумает.
Может это с кэш связано?
  •  

drummer

Есть идея. Попробуй вместо:
<p id="im2">Melanie C - I Turn To You</p>
Называть:
<p id="v2">Melanie C - I Turn To You</p>
Тогда также само и видео назови:
<iframe src="http://www.youtube-nocookie.com/embed/x7E24eKJvs0?rel=0" id="v2"></iframe>


И теперь универсальный код который в теории должен брать id с "p" и открывать с такимже id "iframe"


$(document).ready(function(){
       $("#klips p").click(function(){
       var klid = $(this).attr("id");
      $('.spoyl iframe').slideUp("slow");
      $('.spoyl iframe#'+klid).slideToggle("slow");
      });
   });



Попробуй должно получится.

Cergo

#4
На странице не может присутствовать два одинаковых id :-X

Добавлено: 23-08-2012, 10:28:25


Думаю надо назначить переменную и подставлять в нее значение id, но не знаю как.

Добавлено: 23-08-2012, 10:46:21


А вот это интересно.
var klid = $(this).attr("id");
Попробую сделать "р" со смещением id+1
  •  


drummer

Тогда попробуй так:
Название:
<p id="i2">Melanie C - I Turn To You</p>
Видео:
<iframe src="http://www.youtube-nocookie.com/embed/x7E24eKJvs0?rel=0" id="vi2"></iframe>
Тогда код:

$(document).ready(function(){
       $("#klips p").click(function(){
       var klid = $(this).attr("id");
      $('.spoyl iframe').slideUp("slow");
      $('.spoyl iframe#v'+klid).slideToggle("slow");
      });
   });



Cergo

Спасибо, попробую.
Отпишусь по результату. :)
  •  

nike2012Topic starter

Цитата: parmactep от 23-08-2012, 00:04:26
var beingShown = false;
            var shown = false;
            var trigger = $('.trigger', this);
            var info = $('.moyklass.', this).css('opacity', 0);

Во-первых: не вижу где здесь определяется класс...
Во-вторых: какую именно функцию вы имеете ввиду, когда говорите о том что она должна применятся?
Если мне не изменяют экстрасенсорные способности, то вы имели ввиду вот так?
var beingShown = false;
            var shown = false;
            var trigger = $('.trigger', this);
            var info = $('.moyklass.', this).css('opacity', 0);
            var info1 = $('.moydrugoiklass.', this).css('opacity', 0);

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

Спасибо за ответ. Но к сожалению не получается, работает только первый класс...
Смотрите, есть сайт, и на нем есть такая "конструкция": <div class="первый">информация<div class="второй"> информация</div></div>. Есть скрипт, он выполняет определенный эффект, визуальный, к второму классу. Предположим меняет цвет ссылки. На той же страничке есть аналогичная "конструкция":<div class="третий">информация<div class="четвертый"> информация</div></div>. Я хочу чтоб к четвертому классу применялся такой же эффект. Однако я не могу, переименовать четвертый класс в второй, потому что он в CSS настраивается по другому.

Во всем скрипте второй класс "светится" только в этом куске кода.

  var beingShown = false;
            var shown = false;
            var trigger = $('.trigger', this);
            var info = $('второй класс', this).css('opacity', 0);

Весь код светить не хочу, извините...Можно сюда добавить еще один класс или просто тупо не заворачиваться и скопировать скрип поменяв в нем класс, ведь нагрузку на сервер он не создает? Спасибо!
  •  


Cergo

drummer, Еще раз спасибо.
Все работает.

Еще бы, настроить отключение звучания предыдущего клипа.
Но это похоже можно сделать только через перезагрузку. :-X
  •  


drummer

#9
Да, вы можете применить эту функцию к нескольким классам, используя селекторы для указания дополнительных классов. В коде, который вы предоставили, вы можете добавить еще один класс, разделив его существующим классом запятой. Например:

var trigger = $('.trigger, .new-class', this);
var info = $('.moyklass, .new-class', this).css('opacity', 0);

Таким образом, функция будет применяться как к элементам с классом "trigger", так и к элементам с классом "new-class". И да, JavaScript выполняется на стороне пользователя, поэтому не создает нагрузку на сервер. Однако, если вы дублируете скрипт для разных классов, это может повлиять на время загрузки страницы, так как браузеру потребуется больше времени на выполнение дополнительного кода.


Здесь пишут может сработать: http://stackoverflow.com/questions/2128535/stop-a-youtube-video-with-jquery