Funktionscode in jquery

Question

Ich habe den folgenden Code Arbeits vereinfachen:

$(document).ready(function() { 
    $(".b0").hover(function() { 
     var src = $(this).attr('data'); 
     var href = $(this).attr('href'); 
     $("#imagen").attr('src', src); 
     $("#vinculo").attr('href', href); 
    }); 
    $(".b1").hover(function() { 
     var src = $(this).attr('data'); 
     var href = $(this).attr('href'); 
     $("#imagen").attr('src', src); 
     $("#vinculo").attr('href', href); 
    }); 
}) 

Aber ich kann es mit einer Funktion nicht vereinfachen. Ich versuchte mehrmals und Wege ...

Answer 1

Sie auch verwenden können dies:

$(document).ready(function() { 
     $(".b0 , .b1").hover(function() { 
      $("#imagen").attr('src', $(this).attr('data')); 
      $("#vinculo").attr('href', $(this).attr('href')); 
     }); 
    }) 

Answer 2

Sie konnten den Event-Handler in einer externen Funktion definieren, dann Zugriff auf das Element mit event.currentTarget statt this, mit so etwas wie folgt aus:

$(document).ready(function() { 

    function hoverHandler(event) { 
     var src = $(event.currentTarget).attr('data'); 
     var href = $(event.currentTarget).attr('href'); 
     $("#imagen").attr('src', src); 
     $("#vinculo").attr('href', href); 
    } 

    $(".b0").hover(hoverHandler); 
    $(".b1").hover(hoverHandler); 
}) 

Answer 3

Wenn Sie eine Funktion erstellen möchten, müssen Sie this es explizit zu übergeben.

function hoverHandler(element) { 
    var src = $(element).attr('data'); 
    var href = $(element).attr('href'); 
    $("#imagen").attr('src', src); 
    $("#vinculo").attr('href', href); 
}  
$(".b0").hover(function() { 
    hoverHandler(this)); 
}); 
$(".b1").hover(function() { 
    hoverHandler(this)); 
}); 

Aber die einfachste Lösung ist es, nur die Selektoren zu kombinieren:

$(".b0, .b1").hover(function() { 
    var src = $(this).attr('data'); 
    var href = $(this).attr('href'); 
    $("#imagen").attr('src', src); 
    $("#vinculo").attr('href', href); 
});