在 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 或 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() 将有助于将行为和外观保持为单独的关注点。