如何通过数组将HTML元素附加到按钮

时间：2017-11-02 23:38:26

标签： javascript jquery html css twitter-bootstrap

我一直在研究基于JS的Web应用程序中的一个功能。以下是我的简单语言理念：

  1. 左下角的按钮。
  2. 滚动开始后，按钮才会显示。
  3. 按下按钮后，将启动一个新窗口以显示pdf。

    4. 到目前为止，我已经使用以下代码在单个页面上工作（太麻烦）：

    // 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>

    这是单个页面中工作示例的屏幕截图：

    screenshot of the working example

    我的总体目标是构建一个脚本以在整个应用程序中自动执行该过程;以下是我第一次尝试实现这一目标：

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

    我似乎无法让它发挥作用。有没有办法压缩这个？

2 个答案:

答案 0 :(得分：0)

正如黑曜石提到的，上面的代码中有一些错误，我把一些东西放在一起，希望能有所帮助。

$(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
});

答案 1 :(得分：0)

黑曜石，罗恩和吉姆 - 感谢您的反馈。我已经收集了您的反馈并对文件进行了更改，现在一切都运行得很好。请参阅以下修改后的代码!! 

//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>

相关问题
最新问题