Question

我有四张ID为img01，img02，img03，img04的图片。

另外四个图像被添加到一个数组中，表明它们与上面提到的每个图像有关，比如ID hover01，hover02，hover03，hover04。

如何编写一个通用函数来显示与每个相关的悬停图像？也就是说，每当鼠标悬停在图像上时，应将参数传递给要显示的函数。

希望这是有道理的。

Answer 1

$("img[id^=img]").each(function() {
    var number = ( this.id + "" ).replace("img", "");
        relatedImg = $("#hover" + number );
});

$("img[id^=img]")选择ID为img的所有图片。

relatedImg是悬停图片。

var getHover = function(myId) {
    var number = ( myId + "" ).replace("img", "");
    return $("#hover" + number );
}

var hoverImage = getHover("img01");

如果您已拥有ID，则可以使用getHover来获取悬停图片。

Answer 2

假设你有这样的img标签：

<img class="hoverImage" id="img01" src="xxx">

您可以使用这样的代码来获取悬停图像的ID，从最后提取数字，在其上添加新前缀并使用新构造的ID显示/隐藏图像：

function makeHoverSelector(str) {
    var matches = str.match(/\d+$/);
    if (matches) {
        return("#hover" + matches[0]);
    }
    return("#missingImage");
}

$(".hoverImage").hover(function() {
    $(makeHoverSelector(this.id)).toggle();
});

将图片ID传递给函数并显示/隐藏（）;

2 个答案: