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有关。 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");
});

这些解决方案都没有奏效。实际上所有这些都只会应用于列表中的第3个area元素的最后一个元素！

所以唯一的解决方法就是这条线：

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

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

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

只在代码中应用此更改，您就可以开始......

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

1 个答案: