Hello to all! How can you reduce these functions? The variables slider1, slider2, slider3, slider4, work_numb, work_numb2, relax_numb, relax_numb2 are repeated.

$('#slider1').slider({ value:30, min:0, max:60, step:1, create: function(event,ui){ var val = $("#slider").slider("value"); $("#work_numb").html(val); }, slide: function(event,ui){ $("#work_numb").html(ui.value); } }); $('#slider2').slider({ value:30, min:0, max:60, step:1, create: function(event,ui){ var val = $("#slider").slider("value"); $("#work_numb2").html(val); }, slide: function(event,ui){ $("#work_numb2").html(ui.value); } }); $('#slider3').slider({ value:30, min:0, max:60, step:1, create: function(event,ui){ var val = $("#slider").slider("value"); $("#relax_numb").html(val); }, slide: function(event,ui){ $("#relax_numb").html(ui.value); } }); $('#slider4').slider({ value:30, min:0, max:60, step:1, create: function(event,ui){ var val = $("#slider").slider("value"); $("#relax_numb2").html(val); }, slide: function(event,ui){ $("#relax_numb2").html(ui.value); } });
  • Does any slider have any one class? - Yuri
  • This is not JS, this is iQuery. Position the question correctly ... - DNS

3 answers 3

You can make a common code in your plugin:

 $.fn.mySlider = function(selector) { $(this).slider({ value:30, min:0, max:60, step:1, create: function(event,ui){ var val = $("#slider").slider("value"); $(selector).html(val); }, slide: function(event,ui){ $(selector).html(ui.value); } }); } $('#slider1').mySlider('#work_numb'); $('#slider2').mySlider('#work_numb2'); $('#slider3').mySlider('#relax_numb'); $('#slider4').mySlider('#relax_numb2');

    You can register a common initialization function for this slider, and each time causing it to transmit different values

    Function call

     getSlider('slider1','work_numb');

    Function itself

     function getSlider(main_selector,html_selector){ $('#'+main_selector).slider({ value:30, min:0, max:60, step:1, create: function(event,ui){ var val = $("#slider").slider("value"); $("#"+html_selector).html(val); }, slide: function(event,ui){ $("#"+html_selector).html(ui.value); } }); }

      Another option:

        var dataSelectors = { '#slider1':'#work_numb', '#slider2':'#work_numb2', '#slider3':'#relax_numb', '#slider4':'#relax_numb2', } $.each(dataSelectors , function(k,v){ $(k).slider({ value:30, min:0, max:60, step:1, create: function(event,ui){ var val = $("#slider").slider("value"); $(v).html(val); }, slide: function(event,ui){ $(v).html(ui.value); } }); })