なぜ私のjQuery関数はコード内にリストされた1つのリンクだけを開くのですか？

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(){});は次のようになります。彼らは、グローバル変数残るように、我々はjQuery(document).ready()外で宣言したが内部にそれらを更新していき

// 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()以外の関数の範囲外になります。

複数のファイルをダウンロードできるようにするというコメントに応じて、ファイル名を配列にプッシュすることをお勧めします。配列にプッシュしたら、forループを使ってそれらを繰り返し、呼び出しを1つずつ実行することができます。

もう一度、サーバーサイドコードを使用していた場合は、これらの別々のファイルを1つのzipファイルに追加して、ユーザーにとってさらに簡単にすることができます。

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

そして今、簡単に新しいコードを説明する：jQueryの/ Javascriptが非サーバー側のソリューションのために、このようになります。まず、myArrayという配列を宣言しました。 if/elseステートメントをifステートメントに変更し、push（追加）して、すべてのチェックボックスのURLをアレイに追加しました。

各ボックスをチェックしてURLを配列に追加すると、totalItemsという別の変数が宣言され、配列にプッシュされる項目の数がチェックされます。配列に項目がない場合は、以前elseステートメントにあったalertを投げます。

がご使用のアレイにのアイテムがある場合、forループは各アイテムを別々に通過し、それぞれのダウンロードウィンドウを開きます。

私はそれが助けてくれることを願っています！

Answer 2

if/else ifを使用しています。ちょうどifステートメントを使用する必要があります。最初の真のifまたはelse ifステートメントの後では、すべてelse ifおよびelseステートメントはスキップされるため、if/else if/else構造体では1つのコードブロックのみが実行されます。

Answer 3

else ifを使用しているためです。しかし、新しいウィンドウをすばやく開こうとすると、ほとんどのブラウザーはデフォルトで新しいウィンドウを開くことをブロックします。ユーザーは自分の側でポップアップを許可する必要があります。