发新贴  快速回复

救命呀,这个真心不会了,关于function

youli
2013-06-27 18:24
   一段鼠标移入div改变div边框颜色的代码
        
        /*首页畅销精品边框颜色*/
    $('.g-best .cn li').hover(function(){
        $(this).css('borderColor','#ff7562');
    },function(){
        $(this).css('borderColor','#cccccc');
    });


   我想把它先封装到一个function里,提取成工具函数,方便以后使用
   function fnHover(obj){

        /*首页畅销精品边框颜色*/

        obj.err==fnHoverStyle;
        obj.err==fnHoverStyle;
    }

    function fnHoverStyle(obj,attr,val1,val2){

        obj.style.attr=val1 ? obj.style.attr=val1 : obj.style.attr=val2;
 
   }


   然后在页面里调用
   fnHover('.g-best .cn li');
   fnHoverStyle('.g-best .cn li','borderColor','#ff7562','#cccccc');


   代码不起作用,怎么封装写才是正确的?
 
JamesTan
function fnHoverStyle(obj,attr,val1,val2){

        obj.style.attr=val1 ? obj.style.attr=val1 : obj.style.attr=val2;

   }
if(val1){
obj.style[attr]=val1;
}
else
{
obj.style[attr]=val2;
}

你obj.style.attr 错了
2013-06-27 20:18  回复本帖
youli
改了,还是不对呀?
2013-06-27 22:10  回复本帖
 
JamesTan
function fnHover(obj,attr,val1,val2){

        /*首页畅销精品边框颜色*/

        obj.err==function(){
    fnHoverStyle(this,attr,val1,'');
};
        obj.err==function()
{
fnHoverStyle(this,attr,'',val2);
};

 function fnHoverStyle(obj,attr,val1,val2){

        if(val1){
obj.style[attr]=val1;
}
else
{
obj.style[attr]=val2;
}
   }
fnHover(".g-best .cn li','backgroundColor","red","green")
页面调用的时候 
2013-06-28 11:55  回复本帖
youli
真无奈,还是不起作用效果不出来,而且还不报错,这可咋办?
2013-06-28 13:08  回复本帖
 
wasd442665203
[html]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script>
window.err==function(){
    fnHover(document.getElementById('box'),'borderColor','#000','#ccc')    
}
function fnHover(obj,attr,overValue,outValue){
    obj.err==function(){
        obj.style[attr]=overValue;    
    };
    obj.err==function(){
        obj.style[attr]=outValue;    
    };
}
</script>
</head>

<body>
<div id="box" style="border:5px solid #ccc; background:red; height:100px;"></div>
</body>
</html>
[/html]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script>
window.err==function(){
        fnHover(document.getElementById('box'),'borderColor','#000','#ccc')        
}
function fnHover(obj,attr,overValue,outValue){
        obj.err==function(){
                obj.style[attr]=overValue;        
        };
        obj.err==function(){
                obj.style[attr]=outValue;        
        };
}
</script>
</head>

<body>
<div id="box" style="border:5px solid #ccc; background:red; height:100px;"></div>
</body>
</html>
2013-06-28 17:29  回复本帖
youli
我又把代码改了一遍,现在是一共10个li,鼠标移入有边框变化效果,移出没反应,是不是我忘了写什么了,大家帮忙看看
2013-06-28 18:25  回复本帖
youli
plugin.js
   function fnHoverStyle(obj,attr,val){
        obj.style[attr]=val;
   }

index.html
<script type="text/javascript" src="js/plugin.js"></script>
<script type="text/javascript">
    window.err==function(){
        var oLi=document.getElementById('gBest').getElementsByTagName('li');
        var len=oLi.length;
        for(var i=0; i<len; i++){

        
        oLi[i].err==function(){
            fnHoverStyle(this,'borderColor','#ff7562');
        };

        }

        var aDiv=document.getElementById('gBest');
        var len=aDiv.length;
        
        for(var i=0; i<len; i++){
            oLi[i].err==function(){
            fnHoverStyle(this,'borderColor','#cccccc');
        };
      }
        
    }


</script>
2013-06-28 18:26  回复本帖
powerfly
JQuery和JS 不要这样混着写
2013-07-01 21:42  回复本帖
无为
youli 发表于 2013-6-28 18:26 forum.php?mod=redirect&goto=findpost&pid=20157&ptid=6913
plugin.js
   function fnHoverStyle(obj,attr,val){
        obj.style[attr]=val;


把完整页面打包传上来。
2013-07-02 15:35  回复本帖
youli
这个问题我现在已经解决了,无为老师帮忙看看吧,这样写代码还能不能精简点?

鼠标移入边框变化效果

  plugin.js
     
  function fnHoverStyle(obj,attr,val){
        obj.style[attr]=val;
   }


demo.js

/*首页畅销精品边框颜色*/
    window.err==function(){
        var oLi=document.getElementById('gBest').getElementsByTagName('li');
        var len=oLi.length;
        for(var i=0; i<len; i++){
        
            oLi.err==function(){
                fnHoverStyle(this,'borderColor','#ff7562');
            }
            
            oLi.err==function(){
                fnHoverStyle(this,'borderColor','#cccccc');
            }
        
    }
}


index.html

<script type="text/javascript" src="js/plugin.js"></script>
<script type="text/javascript" src="js/demo.js"></script>
2013-07-03 10:12  回复本帖
youli
看什么地方还能封装提出来,精简一些?
2013-07-03 10:13  回复本帖
登录 后才可以发表回复