Changing a video link when hovered

I have three divs that change a video link when they are hovered. I have the code working in three different blocks but I am not sure how to combine them since it is very repetitive.

```
$('#videolink-sd').mouseenter(function(event) {
//$(this).toggleClass('home-pager-hover');

$('.top-clock').stop( true, true ).fadeOut();
$('#'+videoID).stop( true, true ).hide();

$('#'+videoID).stop( true, true ).get(0).pause();
$('#'+mp4ID).stop( true, true ).attr('src', sdmp4);
$('#'+oggID).stop( true, true ).attr('src', sdogg);
$('#'+videoID).stop( true, true ).get(0).load();
$('#'+videoID).stop( true, true ).get(0).play();

$('.top-clock').stop( true, true ).removeClass('top-clock--visible');
$('.top-clock-sd').stop( true, true ).addClass('top-clock--visible');

$('#'+videoID).stop( true, true ).delay('500').fadeIn();
$('.top-clock-sd').stop( true, true ).delay('500').fadeIn();
});

$('#videolink-sk').mouseenter(function(event) {
//$(this).toggleClass('home-pager-hover');

$('.top-clock').stop( true, true ).fadeOut();
$('#'+videoID).stop( true, true ).hide();

$('#'+videoID).stop( true, true ).get(0).pause();
$('#'+mp4ID).stop( true, true ).attr('src', skmp4);
$('#'+oggID).stop( true, true ).attr('src', skogg);
$('#'+videoID).stop( true, true ).get(0).load();
$('#'+videoID).stop( true, true ).get(0).play();

$('.top-clock').stop( true, true ).removeClass('top-clock--visible');
$('.top-clock-sk').stop( true, true ).addClass('top-clock--visible');

$('#'+videoID).stop( true, true ).delay('500').fadeIn();
$('.top-clock-sk').stop( true, true ).delay('500').fadeIn();
});

$('#videolink-rb').mouseenter(function(event) {
//$(this).toggleClass('home-pager-hover');

$('.top-clock').stop( true, true ).fadeOut();
$('#'+videoID).stop( true, true ).hide();

$('#'+videoID).stop( true, true ).get(0).pause();
$('#'+mp4ID).stop( true, true ).attr('src', rbmp4);
$(

It's been a while since I've done Javascript, but I think that you want something that looks like this:

function set_video_on_mouseenter(suffix, video_ID, mp4_ID, ogg_ID, mp4_value, ogg_value) {
  $('#videolink-' + suffix).mouseenter(function(event) {
    //$(this).toggleClass('home-pager-hover');

    $('.top-clock').stop( true, true ).fadeOut();
    $('#'+video_ID).stop( true, true ).hide();

    $('#'+video_ID).stop( true, true ).get(0).pause();
    $('#'+mp4_ID).stop( true, true ).attr('src', mp4_value);
    $('#'+ogg_ID).stop( true, true ).attr('src', ogg_value);   
    $('#'+video_ID).stop( true, true ).get(0).load();
    $('#'+video_ID).stop( true, true ).get(0).play();   

    $('.top-clock').stop( true, true ).removeClass('top-clock--visible');
    $('.top-clock-' + suffix).stop( true, true ).addClass('top-clock--visible');

    $('#'+video_ID).stop( true, true ).delay('500').fadeIn();
    $('.top-clock-' + suffix).stop( true, true ).delay('500').fadeIn();
  }); 
}

set_video_on_mouseenter('sd', videoID, mp4ID, oggID, sdmp4, sdogg);
set_video_on_mouseenter('sk', videoID, mp4ID, oggID, skmp4, skogg);
set_video_on_mouseenter('rb', videoID, mp4ID, oggID, rbmp4, rbogg);

$('.home-pager li').mouseenter(function(event){
    $('.home-pager li').stop( true, true ).removeClass('home-pager-hover');
    $(this).stop( true, true ).addClass('home-pager-hover');
});

There isn't enough code here to actually run, so I didn't test. If you post a link to a page that actually has the code working, I can try to do more.

I didn't try to make the code more elegant. This is a very mechanical refactor. I looked at what changed and extracted that as well as variable uses from the original code. Then I just call my new function with the extracted parameters. You could probably do this without extracting the three ID variables, but I think this is more reliable since I can't verify that the code works.

StackExchange Code Review Q#65121, answer score: 2