在jQuery中执行此过程的最有效方法是什么?
What is the most efficient way to do this process in jQuery?
这工作完美无缺,但不知何故,我认为有更容易和更快的方法来做到这一点。我不确定,我在寻求建议。下面是代码:
/* create a hover event and a click event */
// set the status of whether the box is open or closed
var status = 0;
// remove the css hover state (fall back hover)
$("#testApp").off("hover");
// add a jQuery mouseover and mouseout event
$("#testApp").on("mouseover", function() {
$("#testApp div").css({
"background-image":"url(./images/svg/menucorner-bg-lit.svg)"
});
});
$("#testApp").on("mouseout", function() {
$("#testApp div").css({
"background-image":"url(./images/svg/menucorner-bg.svg)"
});
});
// create a click event
$("#testApp").on("click", function() {
if(status == 0) {
// remove the mouseover and mouseout event when the div opens
$("#testApp").off("mouseover");
$("#testApp").off("mouseout");
$("#testApp div").css({
"background-image":"url(./images/svg/menucorner-bg-lit.svg)",
"height":"200px",
"background-color":"#ccc"
});
return status = 1;
}else{
// add the mouseover and mouseout event when the div closes
$("#testApp").on("mouseover", function() {
$("#testApp div").css({
"background-image":"url(./images/svg/menucorner-bg-lit.svg)"
});
});
$("#testApp").on("mouseout", function() {
$("#testApp div").css({
"background-image":"url(./images/svg/menucorner-bg.svg)"
});
});
$("#testApp div").css({
"height":"50px",
"background-color":"transparent"
});
return status = 0;
}
});
基本上它创建了一个悬停状态和点击切换。有没有更有效的方法?
1个jQuery对象来统治它们
由于您在函数的顶部使用$("#testApp");
,您可以将其设置为变量
var testAppEl = $("#testApp")
然后使用它,而不是每次都创建一个新的jQuery对象
使用hover
你可以写这个block:
// add a jQuery mouseover and mouseout event
$("#testApp").on("mouseover", function() {
$("#testApp").on("mouseout", function() {
Into a .hover()
:
testAppEl.hover(function() {
$(this).css({
"background-image":"url(./images/svg/menucorner-bg-lit.svg)"
});
}, function() {
$("#testApp div").css({
"background-image":"url(./images/svg/menucorner-bg.svg)"
});
});
合并off()
这两个可以混合
// Old
$("#testApp").off("mouseover");
$("#testApp").off("mouseout");
// New
testAppEl.off("mouseover mouseout");
以更好的方式使用CSS
正如Drew建议的那样,在CSS文件中添加类,而不是动态的,很难通过jQuery跟踪CSS,即:
.someCSS {
background-image: url(./images/svg/menucorner-bg-lit.svg);
height: 200px;
background-color:#ccc;
}
然后在jQuery中使用
testAppEl.addClass("someCSS");
严格类型/值比较
同样,对于您的第一个if
块,您应该真正使用严格比较操作符:
if (status === 0) {
您可以将两个mouseover mouseout处理程序合并为一个:
$("#testApp").on("mouseover mouseout", function(e) {
img = e.type == 'mouseover' ? 'menucorner-bg-lit.svg' : 'menucorner-bg.svg';
$('div', this).css({
"background-image":"url(./images/svg/"+img+")"
});
});
最后链接和重构
function addHover(){
// add the mouseover and mouseout event when the div closes
$("#testApp").on("mouseover", function() {
$("#testApp div").css({
"background-image":"url(./images/svg/menucorner-bg-lit.svg)"
});
})
.on("mouseout", function() {
$("#testApp div").css({
"background-image":"url(./images/svg/menucorner-bg.svg)"
});
});
}
/* create a hover event and a click event */
// set the status of whether the box is open or closed
var status = 0;
// remove the css hover state (fall back hover)
$("#testApp").off("hover")
// create a click event
.on("click", function() {
if(status == 0) {
// remove the mouseover and mouseout event when the div opens
$("#testApp").off("mouseover");
$("#testApp").off("mouseout");
$("#testApp div").css({
"background-image":"url(./images/svg/menucorner-bg-lit.svg)",
"height":"200px",
"background-color":"#ccc"
});
return status = 1;
}else{
addHover();
$("#testApp div").css({
"height":"50px",
"background-color":"transparent"
});
return status = 0;
}
});
我唯一能建议的是声明不同的css类,而不是通过调用$.css()来改变css使用toggleClass或addClass/removeClass
除了添加和删除事件处理程序之外,您可以将.data()附加到元素上以启用和禁用悬停事件。
// add a jQuery mouseover and mouseout event
$("#testApp").on("mouseover", function() {
if (!$(this).data("disabled")) {
$("#testApp div").css({
"background-image":"url(./images/svg/menucorner-bg-lit.svg)"
});
}
}).on("mouseout", function() {
if (!$(this).data("disabled")) {
$("#testApp div").css({
"background-image":"url(./images/svg/menucorner-bg.svg)"
});
}
}).on("click", function() {
if (!$(this).data("disabled")) {
$("#testApp div").css({
"background-image":"url(./images/svg/menucorner-bg-lit.svg)",
"height":"200px",
"background-color":"#ccc"
});
$(this).data("disabled", true);
} else {
$("#testApp div").css({
"height":"50px",
"background-color":"transparent"
});
$(this).data("disabled", false);
}
});
正如其他人所说,使用。addclass()和。removeclass()代替。css()将有助于保持行为和外观作为独立的关注点。
相关文章:
- 在jQuery中创建向下滑动子菜单的最有效方法
- 使用Underscore.js修改json数组中所选元素的更有效方法
- 选择具有值数组的所有元素的最有效方法
- 将JSON存储和恢复到此Ionic应用程序的最有效方法
- 将javascript数组中的项移动到特定位置的有效方法
- 将JS对象数组转换为嵌套形式的最有效方法
- 隐藏具有特定类$.each、for等的元素的有效方法
- 什么's是调用具有可变参数的函数的有效方法
- 选择具有特定数据的所有 html 标记的最有效方法是什么 - [适当性],无论值如何
- 使用 jQuery 调用 PHP 端点的最有效方法
- 这是解析 Int 的有效方法吗?
- 在JavaScript中搜索数组映射的最有效方法
- 获取字符串中最后一个换行符的最有效方法是什么
- 什么's是在两个(或多个)阵列中找到匹配的细胞序列的最有效方法
- 什么's是在IE8+中添加元素的最有效方法
- 从任何jquery选择器字符串创建元素的最有效方法
- 在日期范围内查找丢失日期的最有效方法是什么
- 对区间[1,10^12]中的整数进行编码/解码的快速有效方法是什么
- 在条件(if)结构的条件语句中是否有定义变量的有效方法
- 在ASP.NET中使用JQuery UI自动完成的有效方法