javascript - jquery在鼠标悬停时替换特定单词

Question

这是我的image tag

这是我获取 src 的 jquery

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

工作很好。现在在鼠标悬停时我需要改变

来源

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

到

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

我怎样才能实现它。

Answer 1

您可以使用替换

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

如果您想确保它是唯一被替换的东西，请添加“/”，例如

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

Answer 2

你可以这样做：

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

Answer 3

如果您必须更换然后恢复

$('.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/')
    })
});

Answer 4

一种解决方案是：

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);
    }
);

Answer 5

你可以使用替换

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

Answer 6

试试这个：

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