Применение эффекта onmouseover JS внутри PHP

Question

Моя проблема, вероятно, довольно проста, но я еще не достиг этого уровня. Я хотел бы применить эффект скремблирования текста с помощью jQuery к моим H3 на боковой панели Wordpress. Я нашел теги H3 здесь (before_title и after_title):

register_sidebar( array(
    'name' => __( 'Main Sidebar', 'twentyeleven' ),
    'id' => 'sidebar-1',
    'before_widget' => '<aside id="%1$s" class="widget %2$s">',
    'after_widget' => "</aside>",
    'before_title' => '<h3 class="widget-title" >',
    'after_title' => '</h3>',
) );

Я попытался добавить onmouseover='$("#unscramble").unscramble(); return false;' в открывающий тег h3, но это неудивительно. Я не уверен, как бы я применил этот эффект в любом случае. Как это устроено сейчас, я полагаю, что при наведении мыши на один триггер сработают все h3s на странице, тогда как я хочу только активировать текущий h3, на котором я нахожу мышь. Я пытаюсь использовать эффект «unscramble», который можно найти здесь: https://github.com/jaz303/jquery-grab-bag

Любая помощь с благодарностью:)

Answer 1

Вы должны убедиться, что применяете идентификатор (unscramble), который вы выбираете в своем jQuery ($('#unscramble') -часть), к своим h3 s (хотя это не будет работать с более чем одним h3 так что забудьте об этом) ИЛИ выберите элемент, который запускает функцию, с помощью $(this) (это настоятельно рекомендуется, поскольку вы можете использовать его с любым количеством элементов).

будет читать: onmouseover='$(this).unscramble();' Вы можете пропустить return false; кстати, так как это не ссылка или что-то еще с поведением при наведении мыши по умолчанию (по крайней мере, я так думаю).

См. Эти примеры: http://jsfiddle.net/uZvYw/1/ и http://jsfiddle.net/uZvYw

Редактировать: Как уже говорили другие, я бы подумал, что было бы немного лучше сгенерировать это поведение в отдельном <script>, но это всего лишь примечание

Answer 2

, хотя вставка HTML или кода JavaScript в PHP не является хорошей практикой. но вы избежали одинарных кавычек при наведении курсора? как:

onmouseover=\'$("#unscramble").unscramble(); return false;\'

Answer 3

Попробуйте связать его в другом месте:

$("h3.widget-title").mouseover(function() {
    // do something
}).mouseout(function() {
    // do something else
});