功能在jQuery的

Question

簡化代碼，我有下面的代碼工作：

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

但我不能用功能簡化它。我試了幾次，以及如何...

Answer 1

您還可以使用這樣的：

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

Answer 2

你可以在外部函數定義事件處理程序，然後用event.currentTarget訪問元素，而不是this，像這樣的東西：

$(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

如果你想創建一個功能，你需要傳遞this給它明確。

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

但最簡單的解決方法就是組合選擇：

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