jQuery.attr('src')replace在FF中不起作用 [英] jQuery.attr('src') replace not working in FF

问题描述

奇怪的问题.这段代码在Chrome/IE中可以正常运行.但是由于某种原因，它在FF 3.6中不起作用.控制台没有显示JS错误.

Strange issue. This code is working perfectly in Chrome / IE. However it does not work in FF 3.6 for some reason. Console shows no JS errors.

应该查找具有特定src属性的所有图像，并在悬停时替换src(我知道其他方法(例如css悬停等)，这是我使用此技术的原因-它不只是简单的翻转，它是动画视频大拇指).

It is supposed to look for all images with a specific src attribute and on hover replace the src (I am aware of other approaches like css hover etc, there is a reason why I use this technique - it's not simply rollovers, it's animated video thumbs).

$("img[src*='libraries/phpthumb/phpThumbYT.php']").each(function(){
var t=$(this);
var src1= t.attr('src'); // initial src
var old_src = src1.substring(src1.lastIndexOf('media/'), src1.lenght);; // extract old source attr    
var media_id = old_src.substring(6,8); // extract media ID (directory name)
if ( old_src.indexOf("animation=1") != -1 )
{
    t.hover(function(){
        // on hover
        $(this).attr('src', 'libraries/phpthumb/phpThumbYT.php?w=131&h=92&far=C&iar=1&sfn=3&zc=C&f=gif&src=http://domain.name/media/'+media_id+'/preview.gif');  
    }, function(){
       // on rollout
        $(this).attr('src', src1);
    });
}
});

我怀疑选择器可能有问题吗?有什么想法吗?

I suspect that there might be a problem with the selector maybe? Any ideas?

推荐答案

终于找到了解决方案.

Finally found the solution.

问题是src1.lenght产生了'undefined'值.尽管Alex提出将其作为问题的根源，但有关 W3C 的文档显示长度是字符串的有效属性.

The problem was that src1.lenght yelded a 'undefined' value. Although proposed by Alex as the source of the problem, documentation on W3C showed length as a valid property of string.

但是，问题本身显然是由对src1.substring(src1.lastIndexOf('media/'), src1.lenght);中的'undefined'值的不同处理引起的. Chrome 和IE只是将'undefined'值视为不存在，因此将字符串解析到最后.但是，在 FF 中，子字符串函数无法完全返回整个字符串.

However, the problem itself was apparently caused by a different handling of the 'undefined' value in src1.substring(src1.lastIndexOf('media/'), src1.lenght);. Chrome and IE took the 'undefined' value simply as not present, therefor the string was parsed till the end. However in FF the substring function failed completely returning the whole string.

隔离此问题后，我仅使用带有一个参数的子字符串修改了脚本，因为我实际上希望它解析到结尾，因此根本不需要第二个参数.

After isolating this problem I modified the script using sub-string with one argument only, as I actually wanted it to parse until the end, so the second parameter was not needed at all.

下面是可在Chrome + IE + FF中运行的最终代码.

Beneath is the final code that works in Chrome + IE + FF.

$("img[src*='libraries/phpthumb/phpThumbYT.php']").each(function(){
var t=$(this);
var src1= t.attr('src'); // initial src
var old_src = src1.substring(src1.lastIndexOf('media/')); // extract old source attr    
var media_id = old_src.substring(6,8); // extract media ID (directory name)
media_id = media_id.replace('/',''); // trim '/' from the end of media_id in case the ID is < 10
if ( old_src.indexOf("animation=1") != -1 )
{
    t.hover(function(){
        // on hover
        $(this).attr('src', 'libraries/phpthumb/phpThumbYT.php?w=131&h=92&far=C&iar=1&sfn=3&zc=C&f=gif&src=http://slovoprekazdeho.sk/media/'+media_id+'/preview.gif');  
    }, function(){
       // on rollout
        $(this).attr('src', src1);
    });
}
});

这篇关于jQuery.attr('src')replace在FF中不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！