Jquery mouseenter问题

Question

我是jquery的初学者。 我有n个div，如果我在它们上面盘旋，另一个div将会消失。 像这样：

    $(".res2").mouseenter(function () {
        $("#jucInfores2").fadeIn("normal");
    });
    $(".res3").mouseenter(function () {
        $("#jucInfores3").fadeIn("normal");
    });
    $(".res4").mouseenter(function () {
        $("#jucInfores4").fadeIn("normal");
    });
    $(".res5").mouseenter(function () {
        $("#jucInfores5").fadeIn("normal");
    });
    $(".res6").mouseenter(function () {
        $("#jucInfores6").fadeIn("normal");
    });
    $(".res7").mouseenter(function () {
        $("#jucInfores7").fadeIn("normal");
    });
    $(".scl").mouseenter(function () {
        $("#jucInfoscl").fadeIn("normal");
    });
    $(".scc").mouseenter(function () {
        $("#jucInfoscc").fadeIn("normal");
    });
    $(".scr").mouseenter(function () {
        $("#jucInfoscr").fadeIn("normal");
    });
    $(".ml").mouseenter(function () {
        $("#jucInfoml").fadeIn("normal");
    });
    $(".mcl").mouseenter(function () {
        $("#jucInfomcl").fadeIn("normal");
    });

还有另一种方法可以让我不要重复这么多次代码吗？ 例如，如果我有20个这样的div？

Answer 1

我建议您反转逻辑并匹配#jucInfo元素，然后使用其id的变量部分来构建类选择器：

$("[id^='jucInfo']").each(function() {
    var $info = $(this);
    $("." + this.id.substr(7)).mouseenter(function() {
        $info.fadeIn("normal");
    });
});

Answer 2

一种方法是将主代码包装在Javascript函数中（为了便于阅读，这是非常文字的例子）：

function jucInfo(res, infores) {
    $(res).mouseenter(function () {
        $(infores).fadeIn("normal");
    });
}

在调用函数时可以传递所有变量：

jucInfo(".res2", "#jucInfores2");
jucInfo(".res3", "#jucInfores3");
...

要进一步细化，请将所有选择器类和ID对放在hash中，然后创建一个循环，重复上面所需的次数（即散列中的元素数）。