如何在JQuery中拆分字符串？

I have a menu with PNG icons. I want when user hover menu item, PNG icon change to GIF icon. i tried this: jsFiddle

我有一个带PNG图标的菜单。我想当用户悬停菜单项时,PNG图标变为GIF图标。我试过这个:jsFiddle

$("#image").mouseenter(function(){
    // I can set GIF url here
    $(this).attr("src","http://jsfiddle.net/img/logo.png");
});

$("#image").mouseleave(function(){
    $(this).attr("src","http://jsfiddle.net/img/logo-white.png");
});

but I know this is not right way. I can not do this for every menu item. this is my HTML:

但我知道这不是正确的方法。我无法为每个菜单项执行此操作。这是我的HTML:

<ul>
    <li>
        <a> item 1
        <img src="image-path" />
        </a>
    </li>
    <li>
        <a> item 2
        <img src="image-path" />
        </a>
    </li>
</ul>

I followed this question but this is not what I want. I want to split on last . or last / in path.

我跟着这个问题,但这不是我想要的。我想最后分手。或者最后/在路径中。

this code split string on every / character:

此代码在每个/字符上拆分字符串:

var data =$("#image").attr("src");
var array = data.split('/');

Question:

I have this image path: ../images/icon1.png and I want to change it to these paths:

我有这个图像路径:../ images / icon1.png,我想将其更改为这些路径:

../images/icon1.gif or ../images/hover/icon1.gif

../images/icon1.gif或../images/hover/icon1.gif

6 个解决方案

#1

Try

$('ul img').hover(function (e) {
    $(this).attr('src', function (idx, src) {
        return src.replace(/(.)(png|gif)$/i, '.' + (e.type == 'mouseenter' ? 'gif': 'png'))
    })
})

Demo: Fiddle

#2

There is no need of js for this.

这不需要js。

it can be done simply using css.

它可以简单地使用css完成。

image{background-image:url(../images/icon.png);}
image:hover{background-image:url(../images/icon1.png);}

#3

Just trim off the last three characters:

只需修剪最后三个字符:

var oldSrc = this.src;
this.src = oldSrc.substr(0,oldSrc.length-3)+"png";
// or +"gif" to change to the GIF image.

#4

Did this do the trick ?

这样做了吗?

$(this).attr('src', 'http://jsfiddle.net/img/logo-white.png');

#5

Hiral is correct, you do not need JS for this.

Hiral是正确的,你不需要JS。

Try the following:

请尝试以下方法:

.icon {
    width: 32px; /* Replace with your own */
    height: 32px; /* Replace with your own */
}
.icon-house {
    background-image:url(../images/icon-house.png);
}
.icon-house:hover {
    background-image:url(../images/icon-house-hover.png);
}
.icon-car {
    background-image:url(../images/icon-car.png);
}
.icon-car:hover {
    background-image:url(../images/icon-car-hover.png);
}
/* etc... */

And change your HTML to something like this:

并将您的HTML更改为以下内容:

<ul>
    <li>
        <a href="index.html">Home
        <span class="icon icon-house"></span>
        </a>
    </li>
    <li>
        <a href="carsrock.html">Cars are awesome!
        <span class="icon icon-car"></span>
        </a>
    </li>
</ul>

Alternatively, you can use a spritesheet, which would save time for your users as well, as they would not need to download many separate small images.

或者,您可以使用spritesheet,这样可以为用户节省时间,因为他们不需要下载许多单独的小图像。

This article is relevant: http://css-tricks.com/css-sprites/

本文是相关的:http://css-tricks.com/css-sprites/

#6

You can use regular expression to replace the path:

您可以使用正则表达式替换路径:

var newSrc = $(this).attr("src").replace(/\.png$/, ".gif");
$(this).attr("src", newSrc);

#1

Try

$('ul img').hover(function (e) {
    $(this).attr('src', function (idx, src) {
        return src.replace(/(.)(png|gif)$/i, '.' + (e.type == 'mouseenter' ? 'gif': 'png'))
    })
})