Question

我有许多针对不同ID的函数，这些函数做了很多相同的事情。我试图将它添加到for循环中，但我遇到了一个关闭问题。任何人都可以帮助使这个代码更简洁吗？

var customColors = ["#000000", "#cc0000", "#2c53a0", "#e3580b", "#cc8900", "#4e9345", "#44b9be", "#8ed1e4", "#8a4593", "#68737a", "#2895d2"];

var customColorsShade = ["#000000", "#540000", "#142340", "#592205", "#543500", "#1E391B", "#1A474C", "#3A535A", "#361B39", "#2C2B32", "#103B54"];

$("#rect-id1").mouseover(function() {
    $("#pattern1 path").attr("stroke", customColorsShade[1]);
});
$("#rect-id2").mouseover(function() {
    $("#pattern2 path").attr("stroke", customColorsShade[2]);
});
$("#rect-id3").mouseover(function() {
    $("#pattern3 path").attr("stroke", customColorsShade[3]);
});
$("#rect-id4").mouseover(function() {
    $(this).attr("fill", customColorsShade[1]);
});
$("#rect-id5").mouseover(function() {
    $(this).attr("fill", customColorsShade[2]);
});
$("#rect-id6").mouseover(function() {
    $(this).attr("fill", customColorsShade[3]);
});

$("#rect-id1").mouseout(function() {
    $("#pattern1 path").attr("stroke", customColors[1]);
});
$("#rect-id2").mouseout(function() {
    $("#pattern2 path").attr("stroke", customColors[2]);
});
$("#rect-id3").mouseout(function() {
    $("#pattern3 path").attr("stroke", customColors[3]);
});
$("#rect-id4").mouseout(function() {
    $(this).attr("fill", customColors[1]);
});
$("#rect-id5").mouseout(function() {
    $(this).attr("fill", customColors[2]);
});
$("#rect-id6").mouseout(function() {
    $(this).attr("fill", customColors[3]);
});

编辑添加笔：http://codepen.io/sharperwebdev/pen/RWLypw?editors=001

Answer 1

您可以在一个for循环中执行此操作。

for (var i = 1; i < 4; i++){
    $("#rect-id" + i).mouseover(function() {
        $("#pattern" + i + "path").attr("stroke", customColorsShade[i]);
    });
    $("#rect-id" + i).mouseout(function() {
        $("#pattern" + 1 + "path").attr("stroke", customColors[i]);
    });
    $("#rect-id" + (i + 3)).mouseover(function() {
        $(this).attr("fill", customColorsShade[i]);
    });
    $("#rect-id" + (i + 3)).mouseout(function() {
        $(this).attr("fill", customColors[i]);
    });
}

链接事件活页夹的方式稍微简洁：

for (var i = 1; i < 4; i++){
    $("#rect-id" + i)
        .mouseover(function() {
            var index = getIndex(this);
            $("#pattern" + index + " path").attr("stroke", customColorsShade[index]);
        })
        .mouseout(function() {
            var index = getIndex(this);
            $("#pattern" + index + " path").attr("stroke", customColors[index]);
        });
    $("#rect-id" + (i + 3))
        .mouseover(function() {
            var index = getIndex(this);
            $(this).attr("fill", customColorsShade[index - 3]);
        })
        .mouseout(function() {
            var index = getIndex(this);
            $(this).attr("fill", customColors[index - 3]);
        });
}

function getIndex(elem){
    return $(elem).attr("id").replace("rect-id", "");
}

此处它正在处理您的codepen。

编辑：已修复以便我更改：

Answer 2

使用下面的代码。

如果您使用的是$(this).index()。此处<rect>将提供以0开头的data-id索引。

此外，您可以使用<rect data-id="1">属性$(this).data('id')并使用$(this).index()代替$("rect[id^=rect-id]" ).mouseover(function() { if($(this).index() < 3){ $("#pattern"+($(this).index())+" path").attr("stroke", customColorsShade[$(this).index()] ); }else{ $(this).attr("stroke", customColorsShade[$(this).index()] ); } }); $("rect[id^=rect-id]" ).mouseout(function() { if($(this).index() < 3){ $("#pattern"+($(this).index())+" path").attr("stroke", customColors[$(this).index()] ); }else{ $(this).attr("stroke", customColors[$(this).index()] ); } });

String

重复代码，它可以更高效吗？

2 个答案: