jQuery делает что-то, когда класс добавил класс

У меня есть li с классом tab3. В другом месте есть jQuery, который при наведении на него добавляет класс «выбрано». Я хочу что-то сделать, когда это произойдет:

<li class='tab3 selected'>
  <div class='showme'>Show this</div>
  <div class='addattr'>Add attributes</div>
</li>

$('.tab3.selected').each(function() {
    $('.showme').show();
    $('.addattr').attr('style', 'position:relative; display:block');
});

jquery each show attr
person ToddN    schedule 14.11.2011    source источник
comment
Вам нужно найти, где находится функция наведения, и добавить туда свой код. ИЛИ реализовать другую привязку функции наведения.   -  person John Hartsock    schedule 15.11.2011
comment
Это действительно неправильный способ установить стиль для элемента. Найдите метод jQuery .css() и используйте его. Установка таким образом может даже не работать (в некоторых браузерах).   -  person Pointy    schedule 15.11.2011
comment
Pointy ниже дал вам лучший ответ в отношении jQuery. Однако, во-первых: ваш пример сам по себе имеет некоторые недостатки: элементы div уже отображаются (если у showme нет css display:none); во-вторых, если и showme, и addattr имеют css display:none; зависание никогда не произойдет, так как весь li скрыт. Боже, здесь так много различий; и, наконец, css:hover — лучший способ справиться с такими простыми вещами.   -  person zequinha-bsb    schedule 15.11.2011
comment
с другой стороны, вам не нужен каждый (), поскольку jquery является трансверальным. это будет делать $('.tab3.selected .showme').show(); $('.tab3.selected .addattr').css('position', 'relative').css('display', 'block'); Более того, лучше создать класс для position:relative; display:block, а также правило css в вашей таблице стилей. например, класс relblock, поэтому вы можете использовать $('.tab3.selected .addattr').addClass('relblock');, который также избавит вас от перерисовки.   -  person roselan    schedule 15.11.2011

Ответы (2)


arrow_upward
2
arrow_downward

Вы можете сделать это через css:

<style type="text/css">
    .tab3 .showme{display:none;}
    .tab3.selected .showme{display:block;}
</style>
person streetlogics    schedule 14.11.2011
comment
мне нравится этот подход, и здесь можно поиграть с ним - person roselan; 15.11.2011

arrow_upward
3
arrow_downward

Для этого нет встроенного способа, но вы всегда можете зарегистрировать обработчик событий для «настраиваемого» события, такого как «изменение класса», а затем запускать его всякий раз, когда вы обновляете класс элемента. (Вы даже можете переопределить функцию «addClass», чтобы сделать это.)

$('whatever').addClass('selected').trigger('class-change');

// ...

$('.tab3').bind('class-change', function() {
  $('.tab3.selected').each(function() {
    $('.showme').show();
    $('.addattr').attr('style', 'position:relative; display:block');
  });
});

Конечно, вы также должны рассмотреть возможность использования простых старых правил CSS, чтобы изменить внешний вид при добавлении/удалении классов, как указано в ответе @Brad Wedell.

person Pointy    schedule 14.11.2011
comment
хм? почему бы тогда не вызвать изменения непосредственно в привязке при наведении? Если у него нет доступа к функции привязки при наведении, которая добавляет выбранный класс, я не вижу, чтобы он мог инициировать изменение класса в addClass(). - person roselan; 15.11.2011
comment
Идея состоит в том, что просто вызывая событие, код, который изменяет класс, не должен знать о деталях другого кода. Это техника разъединения. Чтобы инициировать событие изменения класса в addClass(), потребуется, чтобы стандартный addClass() был заменен оболочкой. - person Pointy; 15.11.2011
comment
да, но все же основная мысль остается. Если у него нет доступа к функции, которая привязывает наведение для выполнения addClass, он не может инициировать пользовательское событие. Если есть доступ, то, конечно, это элегантный способ;) - person roselan; 15.11.2011
comment
Ах да, это правда. Я предположил, что это всего лишь одно приложение, которое можно доработать. В противном случае вы правы - единственное, что нужно сделать, это просто запустить нужный код в момент добавления классов. Если даже это невозможно, то, вероятно, остается только CSS или, возможно, интервальный таймер для обновления страницы (юк). - person Pointy; 15.11.2011