关于js函数重构的问题

来源：互联网发布：暴走漫画淘宝编辑：程序博客网时间：2024/05/23 15:07

今天在走获得焦点动作时，想着去重构一下获得和失去焦点的代码，重构前：

$(".searchInput").focus(function(){$(".search").css("width","320px");$(".searchInput").css({"width":"268px","border":"none","outline":"none"});$(".searchHidden").css("display","block");$(".searchbtn").css({"background-color":"#969696","color":"white"});});$(".searchInput").blur(function(){$(".search").css("width","240px");$(".searchInput").css({"width":"188px","border-style":"none"});$(".searchHidden").css("display","none");});

重构后：

$(".searchInput").focus(function(){changeInputDiv("320px","268px","block","#969696","white")});$(".searchInput").blur(function(){changeInputDiv("240px","188px","none","#eeeeee","#969696")});function changeInputDiv(width1,width2,display,bakcolor,color){$(".search").css("width",width1);$(".searchInput").css("width",width2);$(".searchHidden").css("display",display);$(".searchbtn").css({"background-color":bakcolor,"color":color});}

遇到的问题是：刚开始我直接这样子写，没有在为onfocus建立一个函数，所以解析器是直接调用了changeInputDiv函数，并不能表现出获得焦点和失去焦点的变化。没有点击时就已经调用了这个函数，而获得焦点和失去时就不再有反应。

$(".searchInput").onfocus=changeInputDiv("320px","268px","block","#969696","white");

阅读全文

0 0