如何在 JQuery 中拆分字符串？答案

【问题标题】：How to split string in JQuery?如何在 JQuery 中拆分字符串？
【发布时间】：2013-10-30 22:17:31
【问题描述】：

我有一个带有 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");
});

但我知道这不是正确的方法。我不能对每个菜单项都这样做。这是我的 HTML：

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

我关注了this question，但这不是我想要的。我想在路径中的最后一个. 或最后一个/ 上拆分。

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

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

问题：

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

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

【问题讨论】：

最好使用 CSS 和 sprites。 JS 是矫枉过正，实际上提供了更差的用户体验（图像闪烁作为辅助加载）
我有很多菜单项和每个菜单项的特殊图标。
或者你可以使用一个简单的 javascript replace.
即使我有 10,000 个菜单项都带有图像和图标，我仍然会使用 CSS。如果您还要添加如此多的事件处理程序，则会降低性能。如果您发现手动操作过多，请使用脚本生成所需的 CSS。
那么$(this).attr("src", $(this).attr("src").replace('.png', '.gif'));

标签： javascript jquery html css split

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

试试

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

演示：Fiddle

【讨论】：

这正是我想要的
感谢 Arun，您的代码正在运行，但我不明白，您能介绍一些资源吗？

【解决方案3】：

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>

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

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

【讨论】：

我想改变图片路径而不是跨越背景路径
@Mohsen spans 将有背景图像，这将是您的图标，并且看起来完全一样。还是您无法更改 HTML？
这是一个麻烦的解决方案。使用 JQuery 更容易，如果您有 +30 项，请考虑一下！那么你需要创建+60类，我也不知道背景路径。

【解决方案4】：

这成功了吗？

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

【讨论】：

这和他的问题一样，只是单引号？我认为你错过了重点：P

【解决方案5】：

这个不需要js。

只需使用 css 即可完成。

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

【讨论】：

我有很多项目菜单和每个项目的特殊图标。如果我的所有菜单项都有一个图标，您的代码就可以工作。
您可以使用sprite。在此处阅读更多信息w3schools.com/css/css_image_sprites.asp
@Hiral 这是一个糟糕的资源。在其他任何地方，比如 MDN，是否也有相同的记录？
第一：这不是背景！！！第二：我有很多项目！！！看看这个jsfiddle.net/mohsen4887/KK8FQ/1
我想改变图片源路径而不是图片背景路径

【解决方案6】：

只剪掉最后三个字符：

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

【讨论】：