最初状态：
var searchMain = $('.c-search_search'), // 搜索本体 searchBtn = $('.c-search_searchBtn'), // 取消按钮 searchIcon = $('.weui_icon_search'); // 搜索图标 if (searchMain.val()) { searchIcon.addClass('weui_icon_search-focus'); } searchMain.on('focus', function () { searchBtn.show(); searchIcon.addClass('weui_icon_search-focus'); }).on('blur', function () { if (!this.value) { searchBtn.hide(); searchIcon.removeClass('weui_icon_search-focus'); } });1.显然重复最多的是 weui_icon_search-focus 这个类名 那么提出来存变量会不会好一些 万一要修改的话修改一处就好
var searchMain = $('.c-search_search'), // 搜索本体 searchBtn = $('.c-search_searchBtn'), // 取消按钮 searchIcon = $('.weui_icon_search'), // 搜索图标 searchIconFocus = 'weui_icon_search-focus'; if (searchMain.val()) { searchIcon.addClass(searchIconFocus); } searchMain.on('focus', function () { searchBtn.show(); searchIcon.addClass(searchIconFocus); }).on('blur', function () { if (!this.value) { searchBtn.hide(); searchIcon.removeClass(searchIconFocus); } });2.focus blur 这两个事件其实操作的行为差不多相同 那么需不需要封装 这样的话还可以顺便解决 weui_icon_search-focus 多处写的问题
var searchMain = $('.c-search_search'), // 搜索本体 searchBtn = $('.c-search_searchBtn'), // 取消按钮 searchIcon = $('.weui_icon_search'), // 搜索图标 searchIconFocus = 'weui_icon_search-focus'; if (searchMain.val()) { searchIcon.addClass(searchIconFocus); } searchMain.on('focus', function () { fn(); }).on('blur', function () { if (!this.value) { fn(true); } }); function fn(a) { searchBtn[ a ? 'hide' : 'show' ](); searchIcon[ a ? 'removeClass' : 'addClass' ]('weui_icon_search-focus'); }但是 if (searchMain.val()) 这句判断的那个位置的操作就没办法了 我觉得它也应该和 fn 在一起吧 毕竟它和其中的一条行为是一样的 这样的话要改又要改两次了 虽然可以给 fn 加个参数让其只执行第二句 但这样做我总觉得不爽啊 如果正常执行的话还要经过那一层判断~
各位还有什么完美的解决办法不了？~
想不出有更好的办法，个人觉得变量为jquery对象可以加上$以便区分
var $searchMain = $('.c-search_search'), // 搜索本体
if ($searchMain.val()) {
}
$searchMain.on('focus', function () {
}).on('blur', function () {
});
function fn(a,mark) {
}
你这就有点为了封装而封装了，一个函数最好只干一件事情。
hide跟show你还可以用一个toggle封装在一起，但是普通的addClass显然就和这个功能有差别了。
你这里本来就只要一句命令就够了，非得封装在一起毫无意义。而且如果这时你又有一个类似的需求，难道你又要在你封装的函数里再加一个判断吗？
你这里封装函数的目的是增强可读性，可是盲目把类似功能都封装在一起就是南辕北辙了。
赞同楼上答案。
你的需求就是获取焦点时，显示一个元素，并给另一个元素添加一个类。失去焦点则相反。
那么你的实现应该是
逻辑清楚明了，为何要做无谓的封装？
一定要考虑简化的话，应该是从显示元素并给元素添加一个类的样式上来考虑。比如我在父元素上添加一个类
show。 来使用css中的子选择器完成你对元素显示隐藏和样式切换的问题。这样就只用在focus时给
.parent这个元素添加.parent这个元素添加show样式，blur样式，blur时移除即可。