函数用于简化jquery中的代码

Function to simplify code in jquery

本文关键字：代码 jquery 用于 函数      更新时间：2023-09-26

我有以下代码工作:

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

但是我不能用一个函数来简化它。

你也可以这样使用:

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

您可以在外部函数中定义事件处理程序，然后使用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);
})

如果你想创建一个函数，你需要显式地传递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);
});
相关文章：