JQuery заменить конкретные слова при наведении курсора

Question

JQuery заменить конкретные слова при наведении курсора

0

Вот мой image tag

Это мой jquery, чтобы получить src

$('.hoverme').mouseover(function(){
        console.log($(this).attr('src'));
    });

Работает хорошо. Теперь на mouseover мне нужно изменить

src из

/images/image_107/thumb/Ubuntu-Wallpaper-HD.jpg?1380112803

в

/images/image_107/large/Ubuntu-Wallpaper-HD.jpg?1380112803

Как я могу это достичь.

overflow 25 сен. 2013, в 18:49

Источник

Теги:

javascript

jquery

6 ответов

0

Если вам нужно заменить, а затем вернуться

$('.hoverme').hover(function () {
    $(this).attr('src', function (idx, src) {
        return src.replace('/thumb/', '/large/')
    })
}, function () {
    $(this).attr('src', function (idx, src) {
        return src.replace('/large/', '/thumb/')
    })
});

Если это один из способов

$('.hoverme').mouseenter(function () {
    $(this).attr('src', function (idx, src) {
        return src.replace('/thumb/', '/large/')
    })
});

Arun P Johny 25 сен. 2013, в 14:58

0

Одним из решений является следующее:

HTML

<img src="/images/image_107/thumb/Ubuntu-Wallpaper-HD.jpg?1380112803" data-large="/images/image_107/large/Ubuntu-Wallpaper-HD.jpg?1380112803" />

JQuery

$('img').mouseover(
    function()
    {
        var large = $(this).attr('data-large');
        var small = $(this).attr('src');

        $(this).attr('src', large);
        $(this).attr('data-large', small);
    }
);

// And for mouseout
$('img').mouseout(
    function()
    {
        var large = $(this).attr('src');
        var small = $(this).attr('data-large');

        $(this).attr('src', large);
        $(this).attr('data-large', small);
    }
);

Merianos Nikos 25 сен. 2013, в 14:43

0

вы можете использовать замену

$('.hoverme').mouseover(function(){
        var src = $(this).attr('src');
        var newSrc = src.Replace("thumb", "large");
        $(this).attr('src', newSrc);
    });

Richard Banks 25 сен. 2013, в 14:40

0

попробуй это:

$('.hoverme').mouseover(function(){
        this.src="/images/image_107/large/Ubuntu-Wallpaper-HD.jpg?1380112803"
    });

Nishad K Ahamed 25 сен. 2013, в 14:09

0

Вы можете просто сделать:

$(this).attr('src').replace('/thumb/', '/large/');

Bill Criswell 25 сен. 2013, в 14:03

Ещё вопросы

Kimtho6 · Accepted Answer · 2013-09-25T15-30-00.000Z

Вы можете заменить

 $('.hoverme').mouseover(function(){
       console.log($(this).attr('src').replace("thumb", "large" ));
 });

И если вы хотите убедиться, что его единственное, что заменяется, добавьте "/", как

$('.hoverme').mouseover(function(){
       console.log($(this).attr('src').replace("/thumb/", "/large/" ));
});