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

Question

我编写了一个快速图像交换类，通过将“_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);

    });


});

Answer 1

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

Answer 2

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

Answer 3

IE 不支持 substr 参数使用负值。

Answer 4

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

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

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

Answer 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);
      });
 });