помогите мне завернуть слайдер в функцию, которую я могу вызвать

Question

Некоторое время назад я опубликовал вопрос о ползунке jquery здесь

Теперь это работает, но теперь мне нужно обернуть его в функцию для каждого дня недели, поэтомуЯ могу передать значения, поскольку некоторые значения жестко запрограммированы.Я попытался сделать это, и Firebugs сказал мне, что слайдер не определен.

Все, что я хочу сделать - это вызвать функцию семь раз для каждого дня недели и передать идентификатор для ползунка, идентификатор для div, который содержит время, идентификатор для div, который содержит сгенерированныйтаблица, идентификатор для самой таблицы и идентификатор для кнопки.

Текущий код такой:

var startTime;
var endTime;

$("#slider-range").slider({
    range: true, min: 0, max: 1439, values: [540, 1020], step:5, slide: slideTime, /*change: */});
function slideTime(event, ui){
    var minutes0 = parseInt($("#slider-range").slider("values", 0) % 60);
    var hours0 = parseInt($("#slider-range").slider("values", 0) / 60 % 24);
    var minutes1 = parseInt($("#slider-range").slider("values", 1) % 60);
    var hours1 = parseInt($("#slider-range").slider("values", 1) / 60 % 24);
    startTime = getTime(hours0, minutes0);
    endTime = getTime(hours1, minutes1);
    $("#time").html('<p>Opening time: ' + startTime + '</p><p>Closing time: ' + endTime + '</p>');
function getTime(hours, minutes) {
    minutes = minutes + "";
    if (hours == 12) {
    hours = 12;
}
if (hours > 12) {
    hours = hours;
}
if (minutes.length == 1) {
    minutes = "0" + minutes;
}
return hours + ":" + minutes ;

function getTimeloop(minutesloop) {
    minutesloop = minutesloop + "";
    if (minutesloop.length == 1) {
        minutesloop = "0" + minutesloop;
    }
returnminuetsloop;
}                                   }   
                                        slideTime();
                                        $('#btnUpdatetable').click(function(){
var startLoop = parseInt($("#slider-range").slider("values", 0));
var endLoop = parseInt($("#slider-range").slider("values", 1));
$('#bookingTimesTable').remove();
$('<table id="bookingTimesTable">').appendTo('#generatedResultTable');
for(i = startLoop; i < endLoop; i+=5)
{
$('<tr><td style="width:145px; padding-left: 10px;">' + parseInt(i/ 60 % 24) + ':' +  getTimeloop(parseInt(i % 60)) + '</td><td style="padding-left: 10px;" ><input class="chx" name="' + parseInt(i/ 60 % 24) + ':' +  getTimeloop(parseInt(i % 60)) + '" type="checkbox" value="' + parseInt(i/ 60 % 24) + ':' +  getTimeloop(parseInt(i % 60)) + '" /></td></tr>').appendTo('#bookingTimesTable');
}
var i=0;
var period = $('#cboBooking').val();        

$('.chx').each(function(){
  $(this).attr('checked',(i % period ==0));
  i++;
});
$('#bookingTimesTable tr:odd').css('background','#dedede');
}); 

Если бы вы могли помочь мне в этом, это было бы здорово!Он внедряется в течение семи дней недели с помощью интерфейса с вкладками, и я действительно хочу быстро его запустить и запустить

Dan

Answer 1

Просто краткая справка ... Оберните все это в функцию конструктора, которая сформирует замыкание на все содержащиеся в нем переменные и функции.Затем передайте то, что вы хотели бы переопределить как аргументы функции:

function BookingSlider (sliderId, timesDivId, tableDivId, tableId, buttonId) {
    // your code
}

Используйте этот конструктор для создания экземпляров новых экземпляров BookingSlider, передав соответствующие значения:

var bsMonday = new BookingSlider('slider-range', 'time', 'generatedResultTable', 'bookingTimesTable', 'btnUpdatetable');

Убедитесь, что вызамените все строковые константы соответствующими аргументами в вашей функции:

'#btnUpdatetable'

становится

'#' + buttonId