jquery - 具有多个条目的 eq 过滤器行为

Question

我有以下功能:

function blinkIn() {
  setTimeout(function() {
    $("#map area").eq(1).trigger("mouseenter.mapify").trigger("focus.mapify").trigger("touchend.mapify");
    $(".mapify-svg polygon").eq(3).css("stroke", "#FFEB3B");
    blinkOut();
  }, 3000);
}

function blinkOut() {
  setTimeout(function() {
    $("#map area").eq(1).trigger('mouseout.mapify');
    $(".mapify-svg polygon").eq(1).css("stroke", "");
    blinkIn();
  }, 2000);
}

blinkIn();

从我发现的所有 eq 问题中，这似乎是与我的问题最相似的一个:

How to write a jQuery selector with multiple :eq's in single expression?

我知道使用数组并不是速度方面的最佳方法，因此我尝试使用 filter(':eq(0), :eq(1), :eq(2)')

我的新代码如下所示:

function blinkIn() {
  setTimeout(function() {
    $("#map area").filter(':eq(0), :eq(1), :eq(2)').trigger("mouseenter.mapify").trigger("focus.mapify").trigger("touchend.mapify");
    $(".mapify-svg polygon").filter(':eq(0), :eq(1), :eq(2)').css("stroke", "#FFEB3B");
    blinkOut();
  }, 3000);
}

function blinkOut() {
  setTimeout(function() {
    $("#map area").filter(':eq(0), :eq(1), :eq(2)').trigger('mouseout.mapify');
    $(".mapify-svg polygon").filter(':eq(0), :eq(1), :eq(2)').css("stroke", "");
    blinkIn();
  }, 2000);
}

blinkIn();

它似乎有效，但它不再具有与我调用单个 eq 时相同的效果。它曾经具有不再应用的笔画不透明度。

您可以在此处查看最终结果:https://sporedev.ro/pleiade/index.html (左侧三个闪烁的雕像)。

我正在使用mapify https://github.com/etienne-martin/Mapify将突出显示应用于图像映射区域。

我的猜测是它与该过滤器有关。 filter 实际上做了什么以及如何解决这个问题？

Answer 1

我在你的代码上尝试了很多方法，但似乎在这一行中:

$("#map area").filter(':eq(0), :eq(1), :eq(2)').trigger("mouseenter.mapify").trigger("focus.mapify").trigger("touchend.mapify");

无论如何，该插件仅正确应用于列表中的最后一个元素。

我尝试将诸如class="test-mapify"之类的特定类添加到area元素，然后尝试使用它们的类来选择它们，如下所示:

$("#map area.test-mapify").trigger("mouseenter.mapify").trigger("focus.mapify").trigger("touchend.mapify");

或者甚至尝试循环遍历元素并单独选择它们，如下所示:

$.each([0, 1, 2], function(i, v) {
    $("#map area").eq(v).trigger("mouseenter.mapify").trigger("focus.mapify").trigger("touchend.mapify");
});

这些解决方案都不起作用。事实上，所有这些都只会应用于列表中的最后一个元素，即第三个 area 元素!

因此唯一的解决方法是您拥有的这一行:

$(".mapify-svg polygon").filter(':eq(0), :eq(1), :eq(2)').css("stroke", "#FFEB3B");

但它需要一些调整。您必须在 css 中手动添加 opacity。所以你的代码将是这样的:

$(".mapify-svg polygon").filter(':eq(0), :eq(1), :eq(2)').css("stroke", "#FFEB3B").css('opacity', '0.7');

仅在代码中应用此更改，然后就可以开始了...