Почему jQuery не принимает мой # ID из массива?

Я пытаюсь добавить 3 datepickers в 3 из моих полей ввода, поэтому я повторяю следующий код:

Это работает: 

jQuery(function(){
    jQuery("#newnessdate").datepicker({
        dateFormat: 'yy-mm-dd',
        monthNames: ['Januar','Februar','März','April','Mai','Juni','Juli','August','September','Oktober','November','Dezember'],
        dayNames: ['Sonntag', 'Montag', 'Dienstag', 'Mittwoch', 'Donnerstag', 'Freitag','Samstag'],
        dayNamesMin: ['So', 'Mo', 'Di', 'Mi', 'Do', 'Fr', 'Sa']
    });
});

jQuery(function(){
    jQuery("#availabilitydate").datepicker({
        dateFormat: 'yy-mm-dd',
        monthNames: ['Januar','Februar','März','April','Mai','Juni','Juli','August','September','Oktober','November','Dezember'],
        dayNames: ['Sonntag', 'Montag', 'Dienstag', 'Mittwoch', 'Donnerstag', 'Freitag','Samstag'],
        dayNamesMin: ['So', 'Mo', 'Di', 'Mi', 'Do', 'Fr', 'Sa']
    });
});

jQuery(function(){
    jQuery("#expirydate").datepicker({
        dateFormat: 'yy-mm-dd',
        monthNames: ['Januar','Februar','März','April','Mai','Juni','Juli','August','September','Oktober','November','Dezember'],
        dayNames: ['Sonntag', 'Montag', 'Dienstag', 'Mittwoch', 'Donnerstag', 'Freitag','Samstag'],
        dayNamesMin: ['So', 'Mo', 'Di', 'Mi', 'Do', 'Fr', 'Sa']
    });
});

Это не означает: 

var dateIds = [
    "#newnessdate", 
    "#availabilitydate",
    "#expirydate"
];

for (var i = 0; i < dateIds.length; i++)
{
    jQuery(function(){
        jQuery(dateIds[i]).datepicker({
            dateFormat: 'yy-mm-dd',
            monthNames: ['Januar','Februar','März','April','Mai','Juni','Juli','August','September','Oktober','November','Dezember'],
            dayNames: ['Sonntag', 'Montag', 'Dienstag', 'Mittwoch', 'Donnerstag', 'Freitag','Samstag'],
            dayNamesMin: ['So', 'Mo', 'Di', 'Mi', 'Do', 'Fr', 'Sa']
        });
    });
}

Я много тестировал его и не понимаю, почему он не работает, но в строке

jQuery(dateIds[i]).datepicker({

Похоже, что функция jQuery не принимает строки из массива в качестве строк. Вы не могли бы мне помочь?

4 3
javascript arrays jquery for-loop datepicker

4 ответа:

$("#newnessdate, #availabilitydate, #expirydate").datepicker({
            dateFormat: \'yy-mm-dd\',
            monthNames: [\'Januar\',\'Februar\',\'März\',\'April\',\'Mai\',\'Juni\',\'Juli\',\'August\',\'September\',\'Oktober\',\'November\',\'Dezember\'],
            dayNames: [\'Sonntag\', \'Montag\', \'Dienstag\', \'Mittwoch\', \'Donnerstag\', \'Freitag\',\'Samstag\'],
            dayNamesMin: [\'So\', \'Mo\', \'Di\', \'Mi\', \'Do\', \'Fr\', \'Sa\']
        });
    });
}
3

Проблема заключается в том, что цикл завершается, когда вызывается обратный вызов, и значение i является значением конца цикла.

Простое исправление (с дополнительным преимуществом не умножать вызовы на $.ready) :

jQuery(function(){
    for (var i = 0; i < dateIds.length; i++)
    {
            jQuery(dateIds[i]).datepicker({
                dateFormat: \'yy-mm-dd\',
                monthNames: [\'Januar\',\'Februar\',\'März\',\'April\',\'Mai\',\'Juni\',\'Juli\',\'August\',\'September\',\'Oktober\',\'November\',\'Dezember\'],
                dayNames: [\'Sonntag\', \'Montag\', \'Dienstag\', \'Mittwoch\', \'Donnerstag\', \'Freitag\',\'Samstag\'],
                dayNamesMin: [\'So\', \'Mo\', \'Di\', \'Mi\', \'Do\', \'Fr\', \'Sa\']
            });
        }
    }
);
2

Демо 

var dateIds = [
    "#newnessdate", 
    "#availabilitydate",
    "#expirydate"
];

var options = {
    dateFormat: 'yy-mm-dd',
    monthNames: ['Januar','Februar','März','April','Mai','Juni','Juli','August','September','Oktober','November','Dezember'],
    dayNames: ['Sonntag', 'Montag', 'Dienstag', 'Mittwoch', 'Donnerstag', 'Freitag','Samstag'],
    dayNamesMin: ['So', 'Mo', 'Di', 'Mi', 'Do', 'Fr', 'Sa']
};

$.each(dateIds, function(k, v) {
    $(v).datepicker(options); 
});
1

Согласно документации "jQuery (callback) "является аналогом" jQuery(document).готов (обратный вызов)". Вы теряете контекст (итератор цикла "i"), поэтому лучше сделать это так: 

jQuery(function(){
    var dateIds = [
        "#newnessdate", 
        "#availabilitydate",
        "#expirydate"
    ];

    for (var i = 0; i < dateIds.length; i++)
    {
        jQuery(dateIds[i]).datepicker({
            .......
        });
    }
});

Это сохраняет контекст цикла и предотвращает создание нескольких слушателей события (документ готов). Если вам нужен доступ к массиву данных из глобального контекста, просто поместите его вне функции обратного вызова, но использование глобального контекста для хранения данных-плохая практика.

1