Function to simplify code in jquery

Question

I have the following code working:

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

But I can't simplify it with a function. I tried several times and ways...

Given that both event handlers do the exact same thing, just use $('.b0, .b1').hover(... Or better yet - put the same class on both elements — Rory McCrossan
– Rory McCrossan, Commented Nov 10, 2016 at 16:31

RonyLoud · Accepted Answer · 2016-11-10 16:33:23Z

1

You can also use this:

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

answered Nov 10, 2016 at 16:33

RonyLoud

2,4362 gold badges23 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

laurent · Accepted Answer · 2016-11-10 16:32:38Z

1

You could define the event handler in an external function, then access the element with event.currentTarget instead of this, with something like 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);
})

answered Nov 10, 2016 at 16:32

laurent

91.2k83 gold badges310 silver badges445 bronze badges

Comments

Barmar · Accepted Answer · 2016-11-10 16:35:45Z

0

If you want to create a function, you need to pass this to it explicitly.

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

But the simplest solution is to just combine the selectors:

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

answered Nov 10, 2016 at 16:35

Barmar

789k57 gold badges554 silver badges669 bronze badges

Collectives™ on Stack Overflow

Function to simplify code in jquery

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related