为什么我的jQuery函数只打开一个链接而不打开代码中列出的其他链接？

Question

我目前正在实现一个脚本到一个我正在做的网站上，检查用户检查了哪些复选框，然后一旦用户单击，提交它，下载上述文件。我遇到的问题是，无论点击多少复选框，只有第一个文件下载，而没有其他任何一个。

这是我的密码：

// Global manual variables
var classic;
var racing;
var flexer;
// Global handbook variables
var classicEng;
var classicMulti;
var flexerEng;
var racerEng;

// Checkbox download function

jQuery(document).ready(function() {
    classic = jQuery('#edit-submitted-manuals-required-1');
    racing = jQuery('#edit-submitted-manuals-required-2');
    flexer = jQuery('#edit-submitted-manuals-required-3');
    classicEng = jQuery('#edit-submitted-handbooks-required-1');
    classicMulti = jQuery('#edit-submitted-handbooks-required-2');
    flexerEng = jQuery('#edit-submitted-handbooks-required-3');
    racerEng = jQuery('#edit-submitted-handbooks-required-4');

    jQuery('#edit-submit').click(function() {  
        if (classicEng.is(':checked') && classicMulti.is(':checked') && flexerEng.is(':checked') && racerEng.is(':checked')) {
            window.open('/sites/default/files/manuals/classic-xl-45-english.pdf', '_blank');
            window.open('/sites/default/files/manuals/classic-xl-45.pdf', '_blank');
            window.open('/sites/default/files/manuals/flexer-45-english.pdf', '_blank');
            window.open('/sites/default/files/manuals/racing-45-english.pdf', '_blank');

        } else if (classicEng.is(':checked') && classicMulti.is(':checked') && flexerEng.is(':checked')) {
            window.open('/sites/default/files/manuals/classic-xl-45-english.pdf', '_blank');
            window.open('/sites/default/files/manuals/classic-xl-45.pdf', '_blank');
            window.open('/sites/default/files/manuals/flexer-45-english.pdf', '_blank');

        } else if (classicEng.is(':checked') && classicMulti.is(':checked')) {
            window.open('/sites/default/files/manuals/classic-xl-45-english.pdf', '_blank');
            window.open('/sites/default/files/manuals/classic-xl-45.pdf', '_blank');

        } else if (classicEng.is(':checked') && flexerEng.is(':checked')) {
            window.open('/sites/default/files/manuals/classic-xl-45-english.pdf', '_blank');
            window.open('/sites/default/files/manuals/flexer-45-english.pdf', '_blank');

        } else if (classicEng.is(':checked') && racerEng.is(':checked')) {
            window.open('/sites/default/files/manuals/classic-xl-45-english.pdf', '_blank');
            window.open('/sites/default/files/manuals/racing-45-english.pdf', '_blank');  

        } else if (classicMulti.is(':checked') && flexerEng.is(':checked') && racerEng.is(':checked')) {
            window.open('/sites/default/files/manuals/classic-xl-45.pdf', '_blank');
            window.open('/sites/default/files/manuals/flexer-45-english.pdf', '_blank');
            window.open('/sites/default/files/manuals/racing-45-english.pdf', '_blank');  

        } else if (classicMulti.is(':checked') && flexerEng.is(':checked')) {
            window.open('/sites/default/files/manuals/classic-xl-45.pdf', '_blank');
            window.open('/sites/default/files/manuals/flexer-45-english.pdf', '_blank'); 

        } else if (classicEng.is(':checked') && racerEng.is(':checked')) {
            window.open('/sites/default/files/manuals/classic-xl-45.pdf', '_blank');
            window.open('/sites/default/files/manuals/racing-45-english.pdf', '_blank'); 

        } else if (flexerEng.is(':checked') && racerEng.is(':checked')) {
            window.open('/sites/default/files/manuals/flexer-45-english.pdf', '_blank');
            window.open('/sites/default/files/manuals/racing-45-english.pdf', '_blank'); 

        } else if (classicEng.is(':checked')) {
            window.open('/sites/default/files/manuals/classic-xl-45-english.pdf', '_blank');

        } else if (classicMulti.is(":checked")) {
            window.open('/sites/default/files/manuals/classic-xl-45.pdf', '_blank');

        } else if (flexerEng.is(':checked')) {
            window.open('/sites/default/files/manuals/flexer-45-english.pdf', '_blank');

        } else if (racerEng.is(':checked')) {
            window.open('/sites/default/files/manuals/racing-45-english.pdf', '_blank'); 

        } else if (classic.is(':checked') && racing.is(':checked') && flexer.is(':checked')) { 
            window.open('/sites/default/files/manuals/classic-xl-parts.pdf', '_blank');
            window.open('/sites/default/files/manuals/racing-45-parts.pdf', '_blank');
            window.open('/sites/default/files/manuals/flexer-xl-parts.pdf', '_blank');

        } else if (classic.is(':checked') && flexer.is(":checked")) {
            window.open('/sites/default/files/manuals/classic-xl-parts.pdf', '_blank');
            window.open('/sites/default/files/manuals/flexer-xl-parts.pdf', '_blank'); 

        } else if (classic.is(':checked') && racing.is(":checked")) {  
            window.open('/sites/default/files/manuals/classic-xl-parts.pdf', '_blank')
            window.open('/sites/default/files/manuals/racing-45-parts.pdf', '_blank');

        } else if (racing.is(':checked') && flexer.is(':checked')) {
            window.open('/sites/default/files/manuals/racing-45-parts.pdf', '_blank');
            window.open('/sites/default/files/manuals/flexer-xl-parts.pdf', '_blank');

        } else if (classic.is(':checked')) {
            window.open('/sites/default/files/manuals/classic-xl-parts.pdf', '_blank');

        } else if (racing.is(':checked')) {
            window.open('/sites/default/files/manuals/racing-45-parts.pdf', '_blank');

        } else if (flexer.is(':checked')) {
            window.open('/sites/default/files/manuals/flexer-xl-parts.pdf', '_blank');

        }  else {
            alert("Please choose a file to download");
        }
    });
});

如果有人能发现我在这里做错了什么，我们会非常感激的！

Answer 1

我认为这个问题是由手册和手册变量在页面完成加载之前声明的。我建议在相同的位置声明它们，但是在jQuery(document).ready()中更新它们，您可以保证元素已经呈现。

生成的jQuery(document).ready(function(){});如下所示：

    // Manual variables
    var classic;
    var racing;
    var flexer;

    // Handbook variables
    var classicEng;
    var classicMulti;
    var flexerEng;
    var racerEng;

    // Handbook download function
    jQuery(document).ready(function() {
            classic = jQuery('#edit-submitted-manuals-required-1');
            racing = jQuery('#edit-submitted-manuals-required-2');
            flexer = jQuery('#edit-submitted-manuals-required-3');

            // Handbook variables
            classicEng = jQuery('#edit-submitted-handbooks-required-1');
            classicMulti = jQuery('#edit-submitted-handbooks-required-2');
            flexerEng = jQuery('#edit-submitted-handbooks-required-3');
            racerEng = jQuery('#edit-submitted-handbooks-required-4');

        jQuery('#edit-submit').click(function() {  
            if (classicEng.is(':checked')) {
                window.open('/sites/default/files/manuals/file.pdf');
             } else if (classicMulti.is(":checked")) {
                window.open('/sites/default/files/manuals/file.pdf');
            } else if (flexerEng.is(":checked")) {
                window.open('/sites/default/files/manuals/file.pdf');
            } else if (racerEng.is(":checked")) {
                window.open('/sites/default/files/manuals/file.pdf');
            } else if (classic.is(':checked')) {
                window.open('/sites/default/files/manuals/file.pdf');        
            } else if (racing.is(":checked")) {        
                window.open('/sites/default/files/manuals/file.pdf');
            } else if (flexer.is(":checked")) {
                window.open('/sites/default/files/manuals/file.pdf');
            }  else {
                alert("Please choose a file to download");
            }
        });
    });

我们继续在jQuery(document).ready()之外声明，但在内部更新它们的原因是，它们仍然是全局变量。如果我们在jQuery(document).ready()中声明了它们，那么它们就超出了jQuery(document).ready()之外任何函数的范围。

针对您关于使能够下载多个文件的后续评论，我建议让它将文件的名称推入数组中。一旦将它们推入数组中，就可以使用for循环迭代它们，然后逐个启动调用。

同样，如果您使用的是服务器端代码，您可以将这些单独的文件添加到一个zip文件中，以使用户更加容易。对于非服务器端解决方案，jQuery/Javascript如下所示：

        jQuery('#edit-submit').click(function() {
            var myArray = []
            if (classicEng.is(':checked')) {
                myArray.push('/sites/default/files/manuals/file.pdf');
             }
             if (classicMulti.is(":checked")) {
                myArray.push('/sites/default/files/manuals/file.pdf');
            } 
             if (flexerEng.is(":checked")) {
                myArray.push('/sites/default/files/manuals/file.pdf');
            } 
             if (racerEng.is(":checked")) {
                myArray.push('/sites/default/files/manuals/file.pdf');
            } 
             if (classic.is(':checked')) {
                myArray.push('/sites/default/files/manuals/file.pdf');        
            }
             if (racing.is(":checked")) {        
                myArray.push('/sites/default/files/manuals/file.pdf');
            } 
             if (flexer.is(":checked")) {
                myArray.push('/sites/default/files/manuals/file.pdf');
            }  
             //Find out how many files the user has selected
             var totalFiles = myArray.length;
             //Throw an error if no boxes are checked
             if (totalFiles == 0) {
                alert("Please choose a file to download");
             } else {
                     for (var i = 0; i < totalFiles; i++) {
                           //Open a download window for each URL in the array
                           window.open(myArray[i]);
                     }
             }
            }
        });
    });

现在简单地解释一下新代码。首先，我声明了一个名为myArray的数组。我将您的if/else语句更改为仅if语句，并将每个复选框的URL添加到数组中。

一旦函数选中了每个框并将URL添加到数组中，我就会声明另一个名为totalItems的变量，它检查推到数组中的项的数量。如果数组中没有项，我将抛出先前在alert语句中的else。

如果数组中有，则for循环分别遍历每个项目，并打开每个条目的下载窗口。

我希望这能帮上忙！

Answer 2

您正在使用if / else if。您只需要使用if语句。在第一个真正的if或else if语句之后，将跳过所有else if和else语句，因此在if / else if / else结构中只执行一个代码块。

Answer 3

因为你在使用else if。但是，如果您快速尝试打开新窗口，大多数浏览器默认会阻止打开新窗口。用户将不得不允许弹出窗口在他们这一边。