如何通過數組將HTML元素附加到按鈕

Question

我一直在研究基於JS的Web應用程序中的功能。 以下是我的簡單語言提示：

1. 左下角的按鈕。
2. 僅在滾動開始之后，按鈕才可見。
3. 當按下按鈕時，將啟動一個新窗口以顯示pdf。

到目前為止，我已經使用以下代碼在單個頁面上（太麻煩了）使用此代碼：

 // JavaScript Document $(document).ready(function(){ //added this for DW 'use strict'; $('#ap1').append('<div id="formInstructions" class="btn btn-aprs"><span class="fa fa-question-circle"></span>&nbspForm&nbspInstructions</div>'); $(window).scroll(function () { //the original funtion was != 0 if ($(this).scrollTop() !== 0) { $('#formInstructions').fadeIn(); } else { $('#formInstructions').fadeOut(); } }); $('#formInstructions').click(function(){ window.open("../static/instructions/ap2_instrns.pdf", "_blank", "toolbar=no,menubar=no,scrollbars=no, statusbar=no,resizable=yes,top=500,left=500,width=600,height=600"); return false; }); }); 

 #formInstructions { position: fixed; bottom: 10px; left: 10px; cursor: pointer; display: none; } 

 <!-- this is in element in the HMTL file --> <div id="ap1">&nbsp;</div> 

這是單個頁面中工作示例的屏幕截圖：

我的總體目標是構建一個腳本來自動化整個應用程序的流程。 以下是我首次嘗試實現這一目標：

<script type="text/javascript">
      var arr = [ "#ap1", "#ap2", "#ap3", "#ap4", "#ap5", "#ap6", "#ap7", "#ap8", "#ap9", "#ap10", "#ap11", "#ap12", "#ap13", "#ap14", "#ap15", "#ap17", "#apa", "#apb", "#apc", "#apd", "#ape", "#apf, "#apg", "#aph", "#api", "#apj", "#apk", "#apl", "#apm", "#apn", "#apo", "#app, "#apq" ];

      $(document).ready(function(){
        jQuery.each( arr, function( i, val ) {
          $(arr).append('<div id="formInstructions" class="btn btn-aprs"><span class="fa fa-question-circle"></span>&nbspForm&nbspInstructions</div>');

          $(window).scroll(function () {
            //the original function was != 0
                if ($(this).scrollTop() !== 0) {
                    $('#formInstructions').fadeIn();
                } else {
                    $('#formInstructions').fadeOut();
                }
            });
          if (arr = '#ap1') {
            $('#formInstructions').click(function(){
                    window.open("../static/instructions/ap1_instrns.pdf", "_blank", "toolbar=no,menubar=no,scrollbars=no, statusbar=no,resizable=yes,top=500,left=500,width=600,height=600");
                    return false;
          } else if (arr = '#ap2'){
            $('#formInstructions').click(function(){
              window.open("../static/instructions/ap2_instrns.pdf", "_blank", "toolbar=no,menubar=no,scrollbars=no, statusbar=no,resizable=yes,top=500,left=500,width=600,height=600");
              return false;
          } else if (arr = '#ap3') {
            $('#formInstructions').click(function(){
                    window.open("../static/instructions/ap3_instrns.pdf", "_blank", "toolbar=no,menubar=no,scrollbars=no, statusbar=no,resizable=yes,top=500,left=500,width=600,height=600");
                    return false;
          } else if (arr = '#ap4') {
            $('#formInstructions').click(function(){
                    window.open("../static/instructions/ap4_instrns.pdf", "_blank", "toolbar=no,menubar=no,scrollbars=no, statusbar=no,resizable=yes,top=500,left=500,width=600,height=600");
                    return false;
          } else if (arr = '#ap5'){
            $('#formInstructions').click(function(){
              window.open("../static/instructions/ap5_instrns.pdf", "_blank", "toolbar=no,menubar=no,scrollbars=no, statusbar=no,resizable=yes,top=500,left=500,width=600,height=600");
              return false;
          }  else {
            return ("Opps there is something wrong going on!!");
          }
        });
        });
</script>

我似乎無法正常工作。 有沒有辦法凝聚這一點？

Answer 1

正如Obsidian提到的那樣，以上代碼中存在一些錯誤，我整理了一些內容，希望對您有所幫助。

$(document).ready(function(){

    var arr = [ "a1", "a2", "a3", "a4" ];

    $.each( arr, function( i, val ) {

      // you need to use the value(val) not the array(arr)
      $('#'+val).append('<div id="formInstructions" class="btn btn_'+val+'"><span class="fa fa-question-circle"></span>&nbspForm&nbspInstructions</div>');
      // #a1 ,#b1 ...

       $(window).scroll(function() {              
            var scroll = $(window).scrollTop();
            if (scroll >= 0) {
                $('.btn_'+val).fadeIn();
                //.btn_a1 , btn_b1...
            } else {
                $('.btn_'+val).fadeOut();
                //.btn_a1, btn_b1...
            }
        });

        $('.btn_'+val).click(function(){  
            // now you can do the if statement  
            if (val == 'a1') {
                window.open("../static/instructions/ap1_instrns.pdf", "_blank", "toolbar=no,menubar=no,scrollbars=no, statusbar=no,resizable=yes,top=500,left=500,width=600,height=600");
            } else if (val == 'a2'){
                window.open("../static/instructions/ap2_instrns.pdf", "_blank", "toolbar=no,menubar=no,scrollbars=no, statusbar=no,resizable=yes,top=500,left=500,width=600,height=600");
            } else if (val == 'a3') {
                window.open("../static/instructions/ap3_instrns.pdf", "_blank", "toolbar=no,menubar=no,scrollbars=no, statusbar=no,resizable=yes,top=500,left=500,width=600,height=600");       
            }  else {   
                return ("Opps there is something wrong going on!!");
            }     
            return false;
        });// END CLICK
    }); //END EACH
});

Answer 2

黑曜石，羅恩和吉姆-感謝您的反饋。 我已收到您的反饋，並對文件進行了更改，現在一切正常。 請參閱下面的修改代碼！

 //find and append instructions $(document).ready(function() { 'use strict'; var arr = ["ap1", "ap2", "ap3", "ap4", "ap5", "ap6", "ap7", "ap8", "ap9", "ap10", "ap11", "ap12", "ap13", "ap14", "ap15", "ap17", "apa", "apb", "apc", "apd", "ape", "apf", "apg", "apj", "aph", "api", "apj", "apk", "apl", "apm", "apn", "apo", "app"]; $.each(arr, function(i, val) { // you need to use the value(val) not the array(arr) $('#' + val).append('<div id="formInstructions" class="btn btn-aprs"><span class="fa fa-question-circle"></span>&nbspForm&nbspInstructions</div>'); // #a1 ,#b1 ... $(window).scroll(function() { var scroll = $(window).scrollTop(); //this makes the button disappear once at top of the screen if (scroll !== 0) { $('#formInstructions').fadeIn(); //.btn_a1 , btn_b1... } else { $('#formInstructions').fadeOut(); //.btn_a1, btn_b1... } }); $('#formInstructions').click(function() { // now you can do the if statement if (val === 'ap1') { window.open("../static/instructions/ap1_instrns.pdf", "_blank", "toolbar=no,menubar=no,scrollbars=no, statusbar=no,resizable=yes,top=500,left=500,width=600,height=600"); } else if (val === 'ap2') { window.open("../static/instructions/ap2_instrns.pdf", "_blank", "toolbar=no,menubar=no,scrollbars=no, statusbar=no,resizable=yes,top=500,left=500,width=600,height=600"); } else if (val === 'ap3') { window.open("../static/instructions/ap3_instrns.pdf", "_blank", "toolbar=no,menubar=no,scrollbars=no, statusbar=no,resizable=yes,top=500,left=500,width=600,height=600"); } else { return ("Opps there is something wrong going on!!"); } return false; }); // END CLICK }); //END EACH }); //DOCUMENT READY 

 #formInstructions { position: fixed; bottom: 10px; left: 10px; cursor: pointer; display: none; } 

 <div id="ap1"></div>