javascript: URL в jquery html () в onmouseover в href

Question

Этот URL выдает ошибку missing ) after argument. Это динамически генерируется PHP. Я не могу понять правильную последовательность / размещение одинарных и двойных кавычек, чтобы сделать это.

<a href="cards.html" onmouseover="jQuery('.menu-image li').html('<img src='cards_1.png' />');">Cards</a>

Особый желаемый эффект состоит в том, чтобы снова вставить изображение в .menu-image li. Все, что я могу понять, это то, что img src с кавычками (я пробовал одинарные и двойные) не нравится и выдает ошибку аргумента.

Answer 1

Похоже, вам нужно избегать внутренних одинарных кавычек, например:

<a href="cards.html" onmouseover="jQuery('.menu-image li').html('<img src=\'cards_1.png\' />');

Answer 2

Попробуйте экранировать неверные кавычки с помощью \ или \\.

т.е. html('<img src=\'cards_1.png\' />');

В качестве альтернативы, вы можете просто использовать ". Кодировщик URL должен был сделать это автоматически.

Кстати, очень популярная ошибка. не кодировать каждый & в URL как &. Браузеры обычно угадывают, что было задумано, поэтому люди никогда не учатся. Но ссылка

<a href="test.php?a=1&b=2">example</a>

на самом деле неверно и должно быть

<a href="test.php?a=1&amp;b=2">example</a>

Теперь, если бы вы использовали URL-кодировщик вместо того, чтобы просто «печатать» строку, она должна автоматически преобразовать вашу двойную кавычку в & и, вероятно, избавить вас от головной боли.

Answer 3

Используйте закодированные кавычки для тега <img/>:

<a href="cards.html" onmouseover="jQuery('.menu-image li').html('<img src=&quot;cards_1.png&quot; />');">Cards</a>

Answer 4

Вам нужно написать это:

<a href="cards.html" onmouseover="jQuery('.menu-image li').html('<img src=\'cards_1.png\' />');">Cards</a>

... в противном случае ваш браузер не сможет определить, принадлежат ли апострофы тегу <img или команде html(