在jQuery中执行此过程的最有效方法是什么?

What is the most efficient way to do this process in jQuery?

本文关键字：有效 方法 是什么 过程 jQuery 执行      更新时间：2023-09-26

这工作完美无缺，但不知何故，我认为有更容易和更快的方法来做到这一点。我不确定，我在寻求建议。下面是代码:

    /* 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()将有助于保持行为和外观作为独立的关注点。

相关文章：