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

Question

这完美无瑕，但不知怎的，我认为有更简单，更快捷的方法。我不确定，我正在寻找建议。这是代码：

    /* 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;
    }
});

所以基本上它会创建一个悬停状态和一个单击切换。有没有更有效的方法来做到这一点？

Answer 1

1个jQuery对象来统治它们

由于您在函数顶部使用$("#testApp");，因此可以将其设置为变量

var testAppEl = $("#testApp")

然后使用它而不是每次都创建一个新的jQuery对象

使用hover

你可以把这个块：

// add a jQuery mouseover and mouseout event
$("#testApp").on("mouseover", function() {  
$("#testApp").on("mouseout", function() {

进入.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) {

Answer 2

您可以将两个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+")"
    });
});

Answer 3

最后是连锁和重构

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;
    }
});

Answer 4

我唯一可以建议的是声明不同的css类而不是通过调用$ .css（）来改变CSS使用toggleClass vs addClass / removeClass

Answer 5

您可以将.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()将有助于将行为和外表视为单独的问题。