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

これを試して：

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

Answer 5

1つの解決策はこれです：

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 6

置換を使用できます

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