Проблема с использованием добавленного класса с jQuery

Question

Проблема с использованием добавленного класса с jQuery

0

Я написал встроенный скрипт, чтобы автоматически обрабатывать, когда браузер не может загрузить SVG и заменить его PNG-изображением. Эта часть отлично работает, однако я также хочу изменить изображение на ходу, и этот ответ отлично подойдет для меня, за исключением того, что мне не нужно "запускать и находить", если браузер может обрабатывать SVG и не использует PNG. Таким образом, я думал, что у меня будет триггер, когда класс noSVG (именуемый здесь как "myclass") добавлен в теги IMG.

Теперь вот начались проблемы, я могу использовать CSS для изменения стиля добавляемого класса. Но я не могу использовать jQuery для его изменения. Даже незнакомец, когда я пошел добавить его в JSFiddle для вас, ребята, он работает. Прежде чем вы, ребята, подумаете, что я использую плохую версию jQuery, я протестировал несколько версий (в том числе 1.10.1, который используется JSFiddle).

HTML:

<img src="1.svg" onerror="this.onerror=null; this.src='1.png'; this.className+=' myclass';" class="image" id="1" />

JQuery:

$(function() {
    $(".myclass")
    .mouseover(function() { 
        var src = $(this).attr("src").match(/[^\.]+/) + "hover.png";
        $(this).attr("src", src);
        //console.log("moused over");
    })
    .mouseout(function() {
        var src = $(this).attr("src").replace("hover.png", ".png");
        $(this).attr("src", src);
        //console.log("moused out");
    });
});

JSFiddle

block14 13 дек. 2013, в 19:30

Источник

Теги:

javascript

jquery

html

css

1 ответ

Ещё вопросы

Arun P Johny · Accepted Answer · 2013-12-13T15-43-00.000Z

Вы добавляете класс myclass динамически к изображению, поэтому вам нужно использовать делегирование событий

$(function () {
    $(document).on('mouseover', ".myclass", function () {
        var src = $(this).attr("src").replace('.png', 'hover.png');
        $(this).attr("src", src);
        //console.log("moused over");
    }).on('mouseout', ".myclass", function () {
        var src = $(this).attr("src").replace("hover.png", ".png");
        $(this).attr("src", src);
        //console.log("moused out");
    });
});

Демо: скрипка

С другой стороны, Арун набрал 95,0 тыс. Очков своих ответов, отвечая на этот же вопрос. : D
@Arun Ты проверял свой код? Это не сработало для меня.
@isherwood это + обработчик ответа ajax :)
@ArunPJohny Пожалуйста, прочитайте оригинальный вопрос. Это работает в JSFiddle, но не при создании файла * .html. Протестировано с Firefox 26 и Chrome 31.
@ block14 ваш src неверный var src = $(this).attr("src").match(/[^\.]+/) + "hover.png"; - что ты пытаешься сделать с этим
@ block14 try var src = $(this).attr("src").replace('.png', 'hover.png'); вместо
@ArunPJohny Цель кода в целом - использовать графику наилучшего качества и не запускать код, если не требуется. Цель добавления класса состоит в том, чтобы при наведении курсора на IMG не использовался jQuery, если используется SVG. Спасибо за быстрые ответы!