Warning: Cannot use a scalar value as an array in /home/admin/public_html/forum/include/fm.class.php on line 757

Warning: Invalid argument supplied for foreach() in /home/admin/public_html/forum/include/fm.class.php on line 770

Warning: Invalid argument supplied for foreach() in /home/admin/public_html/forum/topic.php on line 737
Форумы портала PHP.SU :: jQuery

 PHP.SU

 Программирование на PHP, MySQL и другие веб-технологии
PHP.SU Портал     На главную страницу форума Главная     Помощь Помощь     Поиск Поиск     Поиск Яндекс Поиск Яндекс     Вакансии  Пользователи Пользователи


 Страниц (2): [1] 2 »   

> Описание: .addClass() || .removeClas()
Поиск в теме | Версия для печати
etoYA
Отправлено: 16 Апреля, 2012 - 19:11:29
Post Id



Участник


Покинул форум
Сообщений всего: 1859
Дата рег-ции: Июль 2011  
Откуда: Крым


Помог: 21 раз(а)
При клике на #header li, со всех элементов (#header li, a, img) уберается класс .active, и добавляется к (#header li, a, img) тем элементам, на которые кликнули.

Вот, у меня вышло такое Закатив глазки Радость Но вы сильно не смейтесь, собственно вопрос:

Как добавить сюда теги? Типа $(this + 'a').
CODE (htmlphp):
скопировать код в буфер обмена
  1. // активация пункта меню
  2. $(function(){
  3.         $('#header li').click(function(){
  4.                 $('#header li').removeClass('active');
  5.                 $('#header li a').removeClass('active');
  6.                 $('#header li a img').removeClass('active');
  7.                 $(this).addClass('active');
  8.         });
  9. });
 
 Top
IllusionMH
Отправлено: 16 Апреля, 2012 - 19:31:13
Post Id



Активный участник


Покинул форум
Сообщений всего: 4254
Дата рег-ции: Февр. 2011  
Откуда: .kh.ua


Помог: 242 раз(а)
etoYA|, ну я бы класс активности присваивал только одному элементу li, а стили уже для li.active, li.active a, li.active a img делал.
Все равно клик обрабатывается для элемента списка, так что проблем быть не должно
 
 Top
etoYA
Отправлено: 16 Апреля, 2012 - 19:31:52
Post Id



Участник


Покинул форум
Сообщений всего: 1859
Дата рег-ции: Июль 2011  
Откуда: Крым


Помог: 21 раз(а)
IllusionMH, как вариант, попробую.
 
 Top
IllusionMH
Отправлено: 16 Апреля, 2012 - 19:35:48
Post Id



Активный участник


Покинул форум
Сообщений всего: 4254
Дата рег-ции: Февр. 2011  
Откуда: .kh.ua


Помог: 242 раз(а)
Хотя обработчик лучше назначить для ссылок, и тогда можно убрать действие по умолчанию, а класс присваивать $(this).parent().addClass('active');

P.S. Слишком много обращений к DOM. Убирать лучше целенаправленно у одного(если использовать предложенный выше вариант, ну или у всех элементов с этим классом) элемента $('#header .active').removeClass('active');

(Отредактировано автором: 16 Апреля, 2012 - 19:36:07)

 
 Top
etoYA
Отправлено: 16 Апреля, 2012 - 19:36:52
Post Id



Участник


Покинул форум
Сообщений всего: 1859
Дата рег-ции: Июль 2011  
Откуда: Крым


Помог: 21 раз(а)
IllusionMH, норм чо)
Ток не могу сообразить, как добавить класс.
 
 Top
DelphinPRO
Отправлено: 16 Апреля, 2012 - 19:36:58
Post Id



Активный участник


Покинул форум
Сообщений всего: 7187
Дата рег-ции: Февр. 2012  


Помог: 353 раз(а)
etoYA пишет:
как вариант, попробую.
единственно верный вариант. так и нужно делать.


-----
Чем больше узнаю, тем больше я не знаю.
 
 Top
IllusionMH
Отправлено: 16 Апреля, 2012 - 19:46:53
Post Id



Активный участник


Покинул форум
Сообщений всего: 4254
Дата рег-ции: Февр. 2011  
Откуда: .kh.ua


Помог: 242 раз(а)
etoYA, в смысле?
как я понимаю структура такая:
CODE (htmlphp):
скопировать код в буфер обмена
  1. <ul>
  2. <li>
  3.   <a><img/></a>
  4. </li>
  5. </ul>

тогда
CODE (javascript):
скопировать код в буфер обмена
  1. $(function(){
  2.         $('#header a').click(function(e){
  3.                 //e.preventDefault();
  4.                 $('#header .active').removeClass('active');
  5.                 $(this).parent().addClass('active');
  6.         });
  7. });
 
 Top
etoYA
Отправлено: 16 Апреля, 2012 - 20:15:23
Post Id



Участник


Покинул форум
Сообщений всего: 1859
Дата рег-ции: Июль 2011  
Откуда: Крым


Помог: 21 раз(а)
решил не менять css и сделать так:

CODE (htmlphp):
скопировать код в буфер обмена
  1. // активация пункта меню
  2. $(function(){
  3.         $('#header a').click(function(){
  4.                 $('#header ul .active').removeClass('active');
  5.                 $(this).parent().addClass('active');
  6.                 $(this).children().addClass('active');
  7.                 $(this).addClass('active');
  8.         });
  9. });
 
 Top
IllusionMH
Отправлено: 16 Апреля, 2012 - 20:27:04
Post Id



Активный участник


Покинул форум
Сообщений всего: 4254
Дата рег-ции: Февр. 2011  
Откуда: .kh.ua


Помог: 242 раз(а)
etoYA, ИМХО зря.
Во-первых, проще(быстрее) CSS селектры
Во-вторых, проще(быстрее) jQuery код.

И даже этот код можно сделать проще(не читабельнее)
CODE (javascript):
скопировать код в буфер обмена
  1. $(this).addClass('active')
  2.   .parent().addClass('active').end()
  3.   .children().addClass('active')

(Отредактировано автором: 16 Апреля, 2012 - 20:27:43)

 
 Top
tuareg
Отправлено: 16 Апреля, 2012 - 23:27:26
Post Id


Участник


Покинул форум
Сообщений всего: 1234
Дата рег-ции: Июнь 2010  


Помог: 69 раз(а)
Можно еще проще и лучше в плане оптимизации Радость
CODE (javascript):
скопировать код в буфер обмена
  1.  
  2. $('ul').on('click','li',null,function(){
  3.    $(this).find('a,img').add(this).addClass('activ');
  4. });
  5.  

Живой пример http://jsfiddle[dot]net/tuareg/hDkrg/

(Отредактировано автором: 16 Апреля, 2012 - 23:31:47)

 
 Top
IllusionMH
Отправлено: 17 Апреля, 2012 - 00:12:05
Post Id



Активный участник


Покинул форум
Сообщений всего: 4254
Дата рег-ции: Февр. 2011  
Откуда: .kh.ua


Помог: 242 раз(а)
tuareg, тут придется проверить, т.к. вроде(не уверен) здесь опять будет происходить тот же самый поиск по селектору, но с указанием основного элемента не document, а li. так что не факт что быстрее. Хотя могу и ошибаться.

Но все равно навешивать трем вложенным элементам класс - лишнее
 
 Top
tuareg
Отправлено: 17 Апреля, 2012 - 00:24:01
Post Id


Участник


Покинул форум
Сообщений всего: 1234
Дата рег-ции: Июнь 2010  


Помог: 69 раз(а)
IllusionMH пишет:
Но все равно навешивать трем вложенным элементам класс - лишнее

Это не лишнее это мазохизм Радость
 
 Top
IllusionMH
Отправлено: 17 Апреля, 2012 - 00:32:24
Post Id



Активный участник


Покинул форум
Сообщений всего: 4254
Дата рег-ции: Февр. 2011  
Откуда: .kh.ua


Помог: 242 раз(а)
tuareg, все-таки find работает медленнее
_http://jsperf.com/jquery-parent-children-vs-find
здесь не нажатие, а просто вместо this подставляется конкретный элемент
 
 Top
tuareg
Отправлено: 17 Апреля, 2012 - 00:48:33
Post Id


Участник


Покинул форум
Сообщений всего: 1234
Дата рег-ции: Июнь 2010  


Помог: 69 раз(а)
Согласен. Но тут если честно, выигрыш "на спичках" получается. А если структура изменится? Добавится какой-нибудь строчный элемент? Будет
CODE (javascript):
скопировать код в буфер обмена
  1.  
  2. $('').parent().parent().parent();
  3. $('').children().children();
  4.  

Улыбка
tuareg пишет:
лучше в плане оптимизации
Я имел ввиду делегирование события, а не поиск элементов.
 
 Top
IllusionMH
Отправлено: 17 Апреля, 2012 - 01:17:22
Post Id



Активный участник


Покинул форум
Сообщений всего: 4254
Дата рег-ции: Февр. 2011  
Откуда: .kh.ua


Помог: 242 раз(а)
tuareg пишет:
tuareg пишет:

лучше в плане оптимизации

Я имел ввиду делегирование события, а не поиск элементов.

Значит я неправильно понял Огорчение
Согласен, так действительно гораздо лучше
(если я правильно понял принцип: обработчик один, и вешается на элемент полученный перед .on, но в this передается элемент, соответствующий селектору по пути "всплытия"(или как там эта фаза когда от источника к документу) или не срабатывает)

Как-то я забыл о том, что в on можно передавать селектор. Спасибо

tuareg пишет:
А если структура изменится? Добавится какой-нибудь строчный элемент? Будет

А с CSS то что будет Радость

(Отредактировано автором: 17 Апреля, 2012 - 01:21:17)

 
 Top
Поиск в теме | Версия для печати
Страниц (2): [1] 2 »
Сейчас эту тему просматривают: 0 (гостей: 0, зарегистрированных: 0)
« JavaScript & VBScript »


Все гости форума могут просматривать этот раздел.
Только зарегистрированные пользователи могут создавать новые темы в этом разделе.
Только зарегистрированные пользователи могут отвечать на сообщения в этом разделе.
  



Powered by PHP  Powered By MySQL  Powered by Nginx  Valid CSS  RSS

 
Powered by ExBB FM 1.0 RC1. InvisionExBB