1

这完美无缺，但不知何故，我认为有更简单快捷的方法可以做到这一点。我不确定，我正在寻找建议。这是代码：

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

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

4

5 回答 5

2

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) {
于 2013-04-24T14:35:39.890 回答
0

我唯一可以建议的是声明不同的 css 类，而不是通过调用 $.css() 来更改 CSS 使用 toggleClass 或 addClass / removeClass

于 2013-04-24T14:43:05.753 回答
0

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

于 2013-04-24T14:43:22.800 回答
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+")"
    });
});
于 2013-04-24T14:35:20.513 回答
0

最后链接和重构

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;
    }
});
于 2013-04-24T14:36:45.897 回答