2017-10-23 15 views
2

Ich habe die folgende Funktion:eq mit mehreren Einträgen Filterverhalten

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(); 

Von allen eq Fragen, die ich fand dieses das ähnlichste auf meine Frage zu sein scheint:

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

Ich verstehe, dass die Verwendung eines Arrays ist nicht die beste Lösung Geschwindigkeit, so versuchte ich mit filter(':eq(0), :eq(1), :eq(2)')

Meine n ew Code sieht wie folgt aus:

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(); 

Es scheint zu funktionieren, aber es hat nicht mehr die gleiche Wirkung, die sie verwendet zu haben, als ich eine einzige eq aufrufen. Es hatte eine Deckkraft für den Strich, der nicht mehr angewendet wurde.

Sie können das Endergebnis hier überprüfen: https://sporedev.ro/pleiade/index.html (die drei blinkenden Statuen auf der linken Seite).

Ich verwende Mapify https://github.com/etienne-martin/Mapify, um Hervorhebung auf die Bildkartenbereiche anzuwenden.

Meine Vermutung ist, dass es etwas damit zu tun hat filter. Was macht filter eigentlich und wie kann ich dieses Problem lösen?

+0

Was Verhalten sind Sie wollen .... sie haben blinken in/out nacheinander hintereinander? – charlietfl

+0

Ich möchte, dass sie auf die gleiche Weise blinken wie jetzt, nur dass, bevor ich den Filter hinzugefügt habe, sie 0,7 Deckkraft hatten, damit diese Linien nicht so rau aussehen würden. Aus irgendeinem Grund, wenn ich den Code so belasse, wie er war, berücksichtigt er diese Opazität, nachdem ich den Filter verwendet habe. – SporeDev

+0

Haben Sie einen Link, damit wir den ursprünglichen Code mit 0.7 Opazität sehen können? – EhsanT

Antwort

1

Ich habe versucht, viele Möglichkeiten, auf Ihren Code, aber es scheint, in dieser Linie, dass:

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

Das Plugin nur in der Liste korrekt auf das letzte Element gilt, egal was.

Ich habe versucht, eine bestimmte Klasse wie class="test-mapify" die area Elemente hinzuzufügen, und dann versucht, sie mit ihrer Klasse wie folgt zu wählen:

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

Oder auch durch die Elemente in einer Schleife versucht, und wählen Sie sie wie folgt einzeln :

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

Und keine dieser Lösungen funktionierte. Tatsächlich würden alle von ihnen nur auf das letzte Element in der Liste angewendet, welches das 3. area Element ist!

So ist die einzige Abhilfe ist diese Linie, die Sie:

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

Aber es braucht ein wenig zwicken. Sie müssen opacity im css manuell hinzufügen. So würde der Code wie folgt sein:

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

gelten nur für diese Änderung im Code, und Sie sind gut zu gehen ...

Verwandte Themen