Jquery и: активный селектор

Question

Это мой код:

$('#ss a:active').parent().addClass('ss-active');

Я думаю, вы можете сказать из моего кода, что я хочу сделать, но это не работает, как я могу это сделать?и я также хочу, чтобы, когда пользователь удаляет мышь из кнопки, чтобы вернуться в нормальное состояние, я имею в виду следующее: «пользователь удаляет мышь из кнопки»: пользователь может удерживать нажатой кнопку только некоторое время, ион должен увидеть оператор :active.

Я не могу сделать это с помощью css, потому что мне нужен родитель этого <a>.

// Вот как это работает!

    $('#solicita a').mousedown(function() {
    if($(this).parent().hasClass('solicita-hover'))
    {
        $(this).parent().removeClass('solicita-hover');
        $(this).parent().addClass('solicita-active');
    }
}).mouseleave(function() {
    $(this).parent().removeClass('solicita-active');
});

Answer 1

Разработанный ответ для новичков в jQuery

Вы должны иметь некоторое представление о порядке, в котором происходят события в Javascript. Когда браузер видит написанный вами скрипт, он анализирует его по одной строке сверху вниз (по большей части).

Итак, когда он читает ваши селекторы CSS ( Sizzle ) в jQuery, он будет смотреть на документ в его текущем состоянии для выбранного вами селектора. Это означает, что если вы напишите $('#my-id div').addClass( 'some-class' ), он будет искать элементы div внутри элемента с идентификатором my-id в данный конкретный момент и добавлять к ним классы.

Если вы добавите больше div в #my-id, они не получат никаких дополнительных классов , потому что их не было, когда браузер первоначально прочитал эту строку Javascript.

Итак, в исходном вопросе, когда спрашивающий пишет $('#ss a:active').parent().addClass('ss-active');, браузер ищет только #ss a:active в миллисекунду, в которую он читает эту строку.

Итак, мы должны связать события Javascript, чтобы обнаружить что-то, что может произойти в будущем

Вот почему нам приходится делать что-то вроде $('#ss a').mousedown( function ).mouseup( function ). Потому что это сообщает jQuery и браузеру, что вы ожидаете (или listen ), чтобы произошло событие.

Answer 2

Попробуйте использовать событие mousedown ():

$('#ss a').mousedown(function() {
 $(this).parent().addClass('ss-active');
}).mouseup(function() {
 $(this).parent().removeClass('ss-active');
});

Answer 3

В jQuery «:» - это то, что они называют метасимволом.То, что следует за «:», обычно представляет собой синтаксис селектора jQuery, например «: file» или «: has ()».

": active" является псевдоклассом CSS, поэтому использование ":" для обозначения псевдокласса противоречит требованиям синтаксиса селектора jQuery.

Все это говорит о том, что вы можете попытаться экранировать ":" с двумя обратными слешами, как предложено в API jQuery.Однако я этого не пробовал.

Answer 4

На самом деле вы можете прослушивать совпадения правил селектора в приличных браузерах (Firefox, Chrome, IE10 +), установив фиктивный ключевой кадр CSS и прослушивая всплывающее событие animationstart, когда оно совпадает с селектором, который вы слушаете. Вот сообщение в блоге, которое углубляется в его сущность и предоставляет крошечное расширение документа / элемента addSelectorListener, чтобы упростить его использование: http://www.backalleycoder.com/2012/08/06/css-selector-listeners/