Question

我为图像翻转构建了一个jQuery函数，即当我将鼠标悬停在特定图像上时，它们应该放大。但问题是这些图像有两种类型，有时它们带有绿色边框，有时带有红色边框。当它们有红色边框时，图像名称以“RB”结尾。现在问题是无论图像是否包含RB，它都会被放大。我使用布尔值作为决策参数，其名称为“pos”。当我打印它时，显示正确的值，但在代码逻辑中它是完全错误的。

<script type="text/javascript">
            var preLoadImages=['../icons/alfresco64.png','../icons/RSS64.jpg',
                            '../icons/google_calendar64.png','../icons/connections64.png',
                            '../icons/linkedin64.png','../icons/salesforce64.png',
                            '../icons/sharepoint_2010_64.png'];

        var imgs=[];
        for(var i=0;i<preLoadImages.length;i++){
            imgs[i]=new Image();
            imgs[i].src=preLoadImages[i];
        }
        $(document).ready(function(){


            $('#slider img').mouseover(function(){
                var j;
                var imgFile=$(this).attr('src');
                var imgFileID=$(this).attr('id');

                if(imgFileID=="Alfresco"){
                    j=0;
                }
                if(imgFileID=="GoogleCalendar"){
                    j=2;
                }
                if(imgFileID=="Linkedin"){
                    j=4;
                }
                if(imgFileID=="Rss"){
                    j=1;
                }
                if(imgFileID=="Salesforce"){
                    j=5;
                }
                if(imgFileID=="Sharepoint"){
                    j=6;
                }
                if(imgFileID=="Connections"){
                    j=3;
                }
                if((j>=0)&&(j<=6)){
                var pos=/RB.png$/.test(imgFile);

                if(pos){
                    return false;
   } if(!pos){
                $(this).hover(
                function(){
                    $(this).attr('src',imgs[j].src);
        },
                function(){
                    $(this).attr('src',imgFile);
                }
       );
       }
                } 
            });
        });
    </script>

根据我的说法，当src包含RB时，该方法应该返回false。但它总是在悬停时放大图像。请帮助我成为jQuery的新手。

Answer 1

对名字进行识别并不是一个好主意，2-3周后你会忘记这个小东西。为您的图像添加类似html5的属性，并将其用于制作差异。

如果仅在悬停效果中你可以尝试使用干净的css并跳过js。如果你使用css看看如何制作一个'精灵'并使用它来启动加载速度。

Answer 2

如果你创建一个jsFiddle，我可以提供帮助，但乍一看这可能是一个问题：

if (pos) {
   return false;
} 

if (!pos) { 
     ... 
}

将其更改为：

if (pos) {
   return false;
} else { 
     ... 
}

Image Rollover jQuery方法行为奇怪

2 个答案: