Anfangsstatus:
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. Der am häufigsten wiederholte Klassenname ist also weui_icon_search-focus. Wenn Sie ihn ändern müssen, ändern Sie ihn einfach an einer Stelle
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.Fokusunschärfe Diese beiden Ereignisse haben tatsächlich fast das gleiche Betriebsverhalten. Müssen sie in diesem Fall auch das an vielen Stellen geschriebene Problem von weui_icon_search-focus lösen?
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');
}
Aber der Betrieb der Position, beurteilt durch if (searchMain.val()), kann meiner Meinung nach auch nicht mit fn zusammen sein, wenn Sie es ändern möchten , Sie müssen zwei Parameter ändern, damit nur der zweite Satz ausgeführt wird. Wenn es normal ausgeführt wird, muss es dennoch diese Beurteilungsebene durchlaufen
Haben Sie eine perfekte Lösung? ~
想不出有更好的办法,个人觉得变量为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
这个元素添加show
样式,blur
时移除即可。