为啥 jQuery 不接受我的数组中的#ID？

Posted 2023-05-09

【中文标题】为啥 jQuery 不接受我的数组中的#ID？

【英文标题】：Why does jQuery does not accept my #ID from the array?为什么 jQuery 不接受我的数组中的#ID？

【发布时间】：2014-08-08 21:05:33

【问题描述】：

我正在尝试将 3 个日期选择器添加到我的 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 函数不接受数组中的字符串作为字符串。你能帮帮我吗？

【问题讨论】：

你的jQuery(function() 声明太多了。

'#epages_expirydate' 不是 dateIds[i]，因为 dateIds[i] 是 '#expirydate'。也许您想要jQuery('#epages'+dateIds[i]).datepicker( 和不带“#”的 dateIds？ （我想这两个脚本的 html 结构完全相同）

如何处理所有这些语法错误？

哦，对不起，我改变了我的问题，让它变得简单，忘记删除“epages_”。这只是为了简化。

【参考方案1】：

$("#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\']
        );
    );

【讨论】：

这是一种更像 jQuery 的方式。 :)

哇，谢谢，这是一种更简单、更短的解决方案。尽管我真正的问题是，“jQuery(function()...)”的使用太多

:-D 当您意识到可以选择事物的多种方式时，jQuery 会很有趣！

【参考方案2】：

你遇到的问题是调用回调的时候循环结束了，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\']
            );
        
    
);

【参考方案3】：

DEMO

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); 
);

【参考方案4】：

根据文档“jQuery(callback)”类似于“jQuery(document).ready(callback)”。你失去了上下文（循环迭代器“i”），所以最好这样做：

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

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

它保存循环上下文并防止创建多个事件（文档就绪）侦听器。如果您需要从全局上下文访问数组数据，只需将其放在回调函数之外，但使用全局上下文存储数据是不好的做法。