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

Более многословно, чем нужно (чтобы показать влияние функций), но в основном меняет test.jpg на test_grey.jpg, если test.jpg является источником элемента img.

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

Answer 5

Попробуйте ввести свой код в событие load вместо ready:

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

Причина использования события load заключается в том, что к тому времени изображения полностью загружаются на страницу в отличие от ready событие.