Wiele selektorów lub wiele funkcji - przyrost wydajności?

Question

Zastanawiam się, czy jego można dokonać następujący kod bardziej zwięzłe:

$('#americasTrigger').hover(
    function() { 
      $('#americasImg').fadeIn() 
     }, 
    function(){ 
      $('#americasImg').fadeOut() 
    } 
); 

$('#europeTrigger').hover(
    function() { 
     $('#europeImg').fadeIn(); 
    }, 
    function(){ 
     $('#europeImg').fadeOut(); 
    } 
);  

$('#middleEastTrigger').hover(
    function() { 
     $('#middleEastImg').fadeIn(); 
    }, 
    function(){ 
     $('#middleEastImg').fadeOut(); 
    } 
);  

//More etc 

Nazwa kraju pozostaje taka sama dla siebie, z „wyzwalacza” lub „img” dodany do końca. Tutaj jest wiele powtórzeń, które wskazują mi, że nie zamierzam tego robić najlepiej.

miałem myśli wokół:

• Crearting się scenariusz, lub
• Jakoś coraz selektor używany do wyboru, dzięki czemu jest ciągiem znaków, dzieląc jego nazwę, aby uchwycić ten kraj w użyciu i zastosowaniu do zagnieżdżonej funkcji fadeIn/Out z "Img" na końcu.

Czy to możliwe, czy też jestem zbyt ciekawy?

Edytuj 1: Dziękuję verymuch za wszystkie odpowiedzi, przepraszam za nie publikowanie html, podałem to poniżej. W skrócie używam map obrazowych nad obrazem bg (ziemi), gdy wyzwalacze hover do opuszczania/wyrzucania moich bezwzględnie umieszczonych obrazów na zawisie.

<div class="mapTub"> 

    <img src="images/transparentPixel.png" class="mapCover" usemap="#worldMap" width="524px" height="273px"/> 

    <map name="worldMap" id="worldMap"> 
    <area id="americasTrigger" shape="poly" coords="1,2,3" href="#americas" /> 
    <area id="europeTrigger" shape="poly" coords="4,5,6" href="#europe" /> 
    <area id="middleEastTrigger" shape="poly" coords="7,8,9" href="#middleEast" /> 
    </map> 

<img src="images/International_americas_dark.png" class="americas" id="americasImg" /> 
<img src="images/International_europe_dark.png" class="europe" id="europeImg" /> 
<img src="images/International_middleEast_dark.png" class="middleEast" id="middleEastImg" /> 

</div> 

---

odpowiedź Reigel wydaje się jakby do zrobienia tutaj, źle go wypróbować raport z powrotem, dalsze komentarze mile widziane! :)

Answer 1

Me, bez znajomości HTML, sugerują, że to ...

$('#americasTrigger, #europeTrigger, #middleEastTrigger').hover(
    function() { 
     var id = this.id; 
     $('#'+id.replace('Trigger', 'Img')).fadeIn(); 
     //$('#'+id.slice('0',id.indexOf('Trigger'))+'Img').fadeIn(); 
    }, 
    function(){ 
     var id = this.id; 
     $('#'+id.replace('Trigger', 'Img')).fadeOut(); 
     //$('#'+id.slice('0',id.indexOf('Trigger'))+'Img').fadeOut(); 
    } 
); 

Można również użyć .replace() jak sugeruje Anurag w komentarzu poniżej ...

---

id ='europeTrigger'; 
alert(id.slice('0',id.indexOf('Trigger'))); // alerts 'europe' 
// '#'+id.slice('0',id.indexOf('Trigger'))+'Img' is '#europeImg' 

demo

Answer 2

Ponieważ wygląda na to, że uzyskujesz dostęp tylko do wersji unique ids, najlepszym wyborem jest użycie IMO lookup table.

var lookmeup = [ [$('#americasTrigger'), $('#americasImg')], 
        [$('#europeTrigger'), $('#europeImg')], 
        [$('#middleEastTrigger'), $('#middleEastImg')] 
       ]; 

$.each(lookmeup, function(index, element){ 
    element[0].hover(function(){ 
     element[1].fadeIn(); 
    }, function(){ 
     element[1].fadeOut(); 
    }); 
}); 

DRY! wszystko gotowe!

Innym sposobem na zrobienie tego w bardziej efektywny sposób byłoby użycie event delegation.

Jeśli wszystkie elementy hover mają taką samą TAG, takie podejście może być przydatne:

$(document.body).delegate('div', 'mouseenter', function(e){ 
    $('#' + e.target.id.replace(/Trigger/, 'Img')).fadeIn(); 
}); 

$(document.body).delegate('div', 'mouseleave', function(e){ 
    $('#' + e.target.id.replace(/Trigger/, 'Img')).fadeOut(); 
}); 

Zakładając, że wszystkie „hoverable” elementy były DIV s. Nadal powinieneś nadać tym elementom wartość classname, aby kierować tylko te określone elementy.

To ma sens, aby ograniczyć root element dla delegate().Tutaj używam document.body, co zrobiłoby .live(). Wspaniałą rzeczą w przypadku .delegate() jest to, że jeśli elementy najeżdżania współużytkują jeden węzeł nadrzędny, można zastosować w tym węźle delegate(). W ten sposób zmniejsza się liczbę procedur obsługi zdarzeń związanych

(2 zamiast 6).

Answer 3

lol, wygląda na to, że może być mniej więcej tego samego rozmiaru lub dłuższy niż twój kod, ale zdecydowanie suszarka.

Dzięki @Andy za wskazanie kary za wyniki w poprzedniej wersji przy użyciu $(..).each.

var regions = ['americas', 'europe', 'middleEast']; 

$.each(regions, function(region) { 
    var trigger = id(region, 'Trigger'); 
    var image = id(region, 'Image'); 

    $(trigger).hover(
     effect(image, 'fadeIn'), 
     effect(image, 'fadeOut'), 
    ); 
}); 

function effect(selector, method) { 
    return function() { 
     $(selector)[method](); 
    }; 
} 

function id(prefix, suffix) { 
    return '#' + prefix + suffix; 
} 

Jeśli można zmienić kod HTML, chciałbym kodować całą wiedzę do samej stronie, i po prostu użyć jQuery do wydarzeń setup hover.

<div class='trigger' data-image='#americasImg'> 
    .. 
</div> 
<div class='trigger' data-image='#europeImg'> 
    .. 
</div> 

JavaScript

function imageId(elem) { 
    return $(elem).attr('data-image'); 
} 

// Using the fade function from before 
$('.trigger').hover(
    effect(imageId(this), 'fadeIn'), 
    effect(imageId(this), 'fadeOut') 
); 

Answer 4

Lub, aby rzeczy znacznie prostsze, dodać klasę markera, zwany 'fadingImage' Na przykład, aby każdy z obrazów, a następnie użyć tego kodu ...

$('.fadingImage').hover( 
    function() { 
     $(this).fadeIn() 
    }, 
    function(){ 
     $(this).fadeOut() 
    } 
); 

Powoduje to, że wszystkie obrazy, niezależnie od ich identyfikatora, są obsługiwane w ten sam sposób, a tak naprawdę należy jedynie określić, które obrazy na stronie muszą mieć załączone instrukcje obsługi, a także s odbywa się za pomocą klasy znaczników. Możesz nawet całkowicie zrezygnować z tych identyfikatorów, jeśli nie są wykorzystywane do niczego innego.

Aktualizacja: Nie że ja budzeni (Dzięki JANDY & Reigel!), Będę zmieniać mój post do czynienia z faktem, że element jest unosił nie jest ten, który jest wyblakły.

Bez przykładowego znacznika, będę musiał przyjąć pewne założenia, ale oryginalny plakat może chcieć dostarczyć rzeczywisty znacznik, aby przedstawić kontekst.

<div> 
    <span class="fadingTrigger">first text to hover over<span> 
    <img class="fadingImage" src="..." alt="first image to be faded"/> 
<div> 
<div> 
    <span class="fadingTrigger">second text to hover over<span> 
    <img class="fadingImage" src="..." alt="second image to be faded"/> 
<div> 

$('.fadingTrigger').hover( 
    function() { 
     $(this).parent().find(".fadingImage").fadeIn() 
    }, 
    function(){ 
     $(this).parent().find(".fadingImage").fadeOut() 
    } 
); 

zależności od struktury znaczników, sposób znalezienia fadingImage, który jest związany z fadingTrigger może się zmieniać, ale posiadające kilka dobrze zdefiniowaną strukturę, powinna być niezawodna.

Powodem, dla którego wolałbym tę metodę niż użycie tablicy identyfikatorów do wyszukiwania elementów, jest to, że wszelkie dodatki do znaczników wymagałyby zmian w javascriptu - byłoby to szczególnie problematyczne, gdyby znaczniki były generowane dynamicznie. Również javascript może być generowany dynamicznie, tak aby zawierał odpowiednią tablicę wartości, ale naruszałby zasadę DRY.