Question

I have this jQuery code:

var thumb = $($('#slider').children('.ui-slider-handle'));   
setLabelPosition();    

$('#slider').bind('slide', function (event, ui) {   
    $('#boksTimer').html((((ui.value) / 31) * 60).toFixed(0) + ' min pr. dag');
    setLabelPosition();
});


    function setLabelPosition() {
    var label = $('#boksTimer');
    label.css('top', '10px');
    label.css('left', thumb.position().left - (label.width() - thumb.width())/ 2);        
}


var thumb2 = $($('#slider2').children('.ui-slider-handle'));   
setLabelPosition2();    

$('#slider2').bind('slide', function (event, ui) {   
    $('#boksTimer2').html((((ui.value) / 31) * 60).toFixed(0) + ' min pr. dag');
    setLabelPosition2();
});


    function setLabelPosition2() {
    var label2 = $('#boksTimer2');
    label.css('top', '10px');
    label.css('left', thumb2.position().left - (label2.width() - thumb2.width())/ 2);        
}


var thumb3 = $($('#slider3').children('.ui-slider-handle'));   
setLabelPosition3();    

$('#slider3').bind('slide', function (event, ui) {   
    $('#boksTimer3').html((((ui.value) / 31) * 60).toFixed(0) + ' min pr. dag');
    setLabelPosition3();
});


    function setLabelPosition3() {
    var label3 = $('#boksTimer3');
    label.css('top', '10px');
    label.css('left', thumb3.position().left - (label3.width() - thumb3.width())/ 2);        
}

How can I make it more DRY?

DRY = Don’t repeat yourself

Answer 1

Here’s the easiest way I can think of:

$('#slider, #slider2, #slider3').bind('slide', function (event, ui)
{
    var num = this.id.replace('slider',''),
        $label = $('#boksTimer' + num).html( (ui.value / 31 * 60).toFixed(0) + ' min pr. dag' ),
        $thumb = $(this).children('.ui-slider-handle');

    $label.css({
        top: 10,
        left: $thumb.position().left - ( $label.width() - $thumb.width() ) / 2
    });
});

That said, you should look into modifying your code to use classes.