Форумы портала PHP.SU :: Версия для печати

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
Форумы портала PHP.SU :: Версия для печати :: jQuery

Форумы портала PHP.SU » Клиентская разработка » JavaScript & VBScript » jQuery

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

1. etoYA - 16 Апреля, 2012 - 19:11:29 - перейти к сообщению

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

Вот, у меня вышло такое Закатив глазки

Но вы сильно не смейтесь, собственно вопрос:

Как добавить сюда теги? Типа $(this + 'a').

CODE (htmlphp):
скопировать код в буфер обмена

// активация пункта меню
$(function(){
        $('#header li').click(function(){
                $('#header li').removeClass('active');
                $('#header li a').removeClass('active');
                $('#header li a img').removeClass('active');
                $(this).addClass('active');
        });
});

2. IllusionMH - 16 Апреля, 2012 - 19:31:13 - перейти к сообщению

etoYA|, ну я бы класс активности присваивал только одному элементу li, а стили уже для li.active, li.active a, li.active a img делал.
Все равно клик обрабатывается для элемента списка, так что проблем быть не должно

3. etoYA - 16 Апреля, 2012 - 19:31:52 - перейти к сообщению

IllusionMH, как вариант, попробую.

4. IllusionMH - 16 Апреля, 2012 - 19:35:48 - перейти к сообщению

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

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

5. etoYA - 16 Апреля, 2012 - 19:36:52 - перейти к сообщению

IllusionMH, норм чо)
Ток не могу сообразить, как добавить класс.

6. DelphinPRO - 16 Апреля, 2012 - 19:36:58 - перейти к сообщению

etoYA пишет:

как вариант, попробую.

единственно верный вариант. так и нужно делать.

7. IllusionMH - 16 Апреля, 2012 - 19:46:53 - перейти к сообщению

etoYA, в смысле?
как я понимаю структура такая:

CODE (htmlphp):
скопировать код в буфер обмена

<ul>
<li>
  <a><img/></a>
</li>
</ul>

тогда

CODE (javascript):
скопировать код в буфер обмена

$(function(){
        $('#header a').click(function(e){
                //e.preventDefault();
                $('#header .active').removeClass('active');
                $(this).parent().addClass('active');
        });
});

8. etoYA - 16 Апреля, 2012 - 20:15:23 - перейти к сообщению

решил не менять css и сделать так:

CODE (htmlphp):
скопировать код в буфер обмена

// активация пункта меню
$(function(){
        $('#header a').click(function(){
                $('#header ul .active').removeClass('active');
                $(this).parent().addClass('active');
                $(this).children().addClass('active');
                $(this).addClass('active');
        });
});

9. IllusionMH - 16 Апреля, 2012 - 20:27:04 - перейти к сообщению

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

И даже этот код можно сделать проще(не читабельнее)

CODE (javascript):
скопировать код в буфер обмена

$(this).addClass('active')
  .parent().addClass('active').end()
  .children().addClass('active')

10. tuareg - 16 Апреля, 2012 - 23:27:26 - перейти к сообщению

Можно еще проще и лучше в плане оптимизации Радость

CODE (javascript):
скопировать код в буфер обмена

 
$('ul').on('click','li',null,function(){
   $(this).find('a,img').add(this).addClass('activ');
});
 

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

11. IllusionMH - 17 Апреля, 2012 - 00:12:05 - перейти к сообщению

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

Но все равно навешивать трем вложенным элементам класс - лишнее

12. tuareg - 17 Апреля, 2012 - 00:24:01 - перейти к сообщению

IllusionMH пишет:

Но все равно навешивать трем вложенным элементам класс - лишнее

Это не лишнее это мазохизм Радость

13. IllusionMH - 17 Апреля, 2012 - 00:32:24 - перейти к сообщению

tuareg, все-таки find работает медленнее
_http://jsperf.com/jquery-parent-children-vs-find
здесь не нажатие, а просто вместо this подставляется конкретный элемент

14. tuareg - 17 Апреля, 2012 - 00:48:33 - перейти к сообщению

Согласен. Но тут если честно, выигрыш "на спичках" получается. А если структура изменится? Добавится какой-нибудь строчный элемент? Будет

CODE (javascript):
скопировать код в буфер обмена

 
$('').parent().parent().parent();
$('').children().children();

tuareg пишет:

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

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

15. IllusionMH - 17 Апреля, 2012 - 01:17:22 - перейти к сообщению

tuareg пишет:

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

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

Значит я неправильно понял Огорчение

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

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

tuareg пишет:

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

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