如何在 JQuery 中拆分字符串

How to split string in JQuery?

本文关键字：拆分 字符串 JQuery      更新时间：2023-09-26

我有一个带有PNG图标的菜单。我希望当用户悬停菜单项时，PNG 图标更改为 GIF 图标。我试过这个： js小提琴

$("#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");
});

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

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

遵循了这个问题，但这不是我想要的。我想在路径中的最后一个.或最后一个/上拆分。

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

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

问题：

我有这个图像路径：../images/icon1.png，我想将其更改为以下路径：

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

尝试

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

演示：小提琴

不需要 js。

它可以简单地使用 CSS 来完成。

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

只需剪掉最后三个字符：

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

这能解决问题吗？ 

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

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

请尝试以下操作：

.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... */

并将您的 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>

或者，您可以使用精灵表，这也可以为用户节省时间，因为他们不需要下载许多单独的小图像。

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

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

var newSrc = $(this).attr("src").replace(/'.png$/, ".gif");
$(this).attr("src", newSrc);
相关文章：