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

Why is my jQuery function only opening one link and not the others listed in the code?

本文关键字：链接 代码 其他 一个 函数 jQuery 我的 为什么      更新时间：2023-09-26

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

下面是我的代码:

// 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");
        }
    });
});
如果有人能指出我在这里做错了什么，那将是非常感激的!

因为您使用的是else if。但是，如果你试图快速打开新窗口，大多数浏览器默认会阻止打开新窗口。

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

我认为问题是由于在页面完成加载之前声明了Manual和Handbook变量引起的。我建议在同一个地方声明它们，但在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语句，push(添加)每个复选框的URL到数组中。

函数检查完每个方框并将URL添加到数组后，我声明了另一个名为totalItems的变量，该变量检查推入数组的项数。如果数组中没有项目，我抛出之前在else语句中的alert。

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

我希望这对你有帮助!

相关文章：