Jquery/Javascript - 存储字符串的最后 4 个字母（跨浏览器）答案

【问题标题】：Jquery/Javascript - store last 4 letters of string (cross browser)Jquery/Javascript - 存储字符串的最后 4 个字母（跨浏览器）
【发布时间】：2010-08-17 13:35:38
【问题描述】：

我编写了一个快速图像交换类，它通过将“_grey”添加到图像 src 来切换悬停时的图像。该代码在除 ie6 之外的所有浏览器中的整个站点中都运行良好。 substr 在这里似乎无法正常工作 - 请提供任何建议！？

代码如下——

$(document).ready(function() {
var initImg;    
    $('img.swapGrey').hover(function() {


        initImg = $(this).attr("src");  
        var imgType = (initImg).substr(-4);
        alert(initImg);
        var greyImg = initImg.slice(0, -4) + "_grey" + imgType;
        alert(greyImg);

        $(this).attr("src",greyImg);

            }, function() {
        $(this).attr("src",initImg);

    });


});

【问题讨论】：

标签： javascript jquery substr

【解决方案1】：

使用slice 而不是substr。 substr 是非标准的，而slice 在 ECMAScript 3 规范中指定（包括负位置），并且在包括 IE 6 在内的所有主要浏览器中都受支持。

【讨论】：

【解决方案2】：

只需在 IE 中使用正的起始位置。

【讨论】：

【解决方案3】：

IE 不支持 substr 的参数为负值。

【讨论】：

【解决方案4】：

尝试将您的代码放入load 事件而不是ready：

$(window).load(function(){
  // your code...
});

使用load 事件的原因是，与ready 事件不同，当图像完全加载到页面中时。

【讨论】：

除非你非常快（视觉上），否则鼠标悬停事件应该无关紧要，即使那样......这不是问题，因为 DOM 将设置 attr src。

【解决方案5】：

比需要的更详细（显示函数的效果），但如果 test.jpg 是 img 元素的 src，则基本上将 test.jpg 更改为 test_grey.jpg。

    $(document).ready(function() {
        var initImg;
        $('img.swapGrey').hover(function() {


            initImg = $(this).attr("src");
            var len = initImg.length - 4;
            var imgType = initImg.slice(len);
            alert(":"+imgType+":");
            alert(initImg + " is " + len +":"+ imgType);
            var greyImg = initImg.slice(0, -4) + "_grey" + imgType;
            alert(greyImg);

            $(this).attr("src", greyImg);

        }, function() {
            $(this).attr("src", initImg);
      });
 });

【讨论】：