需要一种更好的方法来附加大量代码

Question

出于某种原因，此代码在附加后停止工作。我计划在这个巨大的大麦人类可读代码中添加更多内容。如果有人可以向我解释为什么这段代码不起作用，以及我如何更好地附加这段代码，那就太好了。这是一个 chrome 扩展，其中此代码将自身注入网站，因此需要附加它才能存在。对我不起作用的代码部分是应该在主菜单 div.

中隐藏和显示 divs 的函数

$(function() {
 var startmenuicon = $('#topCenter');
 $(startmenuicon).prepend('<img id="du" src="https://cdn4.iconfinder.com/data/icons/BRILLIANT/food/png/400/beer.png" title="Click me!" />');
});

$(function () {
$('#mainul a').click(function(e){
     hideContentDivs();
     var tmp_div = $(this).parent().index();
     $('.maine div').eq(tmp_div).show();
  });

function hideContentDivs(){
    $('.maine div').each(function(){
    $(this).hide();});
}
hideContentDivs();
});

$(function () {
 var maindiv = $('<div id="main-menu"><button id="close" style="font-weight: bold; font-size: 18px; cursor: pointer;  cursor: hand;" onclick="$(this).parent().hide();">X</button><div id="navigation"><nav><ul id="mainul"><li><a href="#">Options</a><span class="dropBottom"></span><ul><li><a href="#" id="link1">Change bg img</a></li><li><a href="#" id="link2">Shot Counter</a></li><li><a href="#" id="link3">Shot Timer</a></li><li><a href="#" id="link4">Embed </a></li><li><a href="#" id="link5">About</a></li><li><a href="#" id="link6">Contact</a></li></ul></ul></nav><div class="maine"><div id="page1" class="content"><h1>Page 1</h1><p>First Section of content.</p></div><div id="page2" class="content"><h1>Page 2</h1><p>Second section of content</p></div><div id="page3" class="content"><h1>Page 3</h1><p>Third section of content</p></div><div id="page4" class="content"><h1>Page 4</h1><p>Fourth section of content</p></div><div id="page5" class="content"><h1>Page 5</h1><p>Fifth section of content</p></div><div id="page6" class="content"><h1>Page 6</h1><p>Six section of content</p></div></div></div>')
 
 $('#du').click(function() {
  var mainwindow = $('body');
  $(mainwindow).append(maindiv);
  $(maindiv).draggable({containment: 'body', scroll: false }).resizable({minWidth: 412, minHeight: 418, containment: 'body'});
 });

 $('#du').click(function() {
  $(maindiv).show();
 });
});

Answer 1

您使用了多个 $(function(){}); 我尝试重新组织事物，还使用 事件委托 来定位 "non-existing-yet" 元素 (#mainul a)，像这样：

$('body').on('click', '#mainul a', function(){});

试一试：

$(function() {
  var startmenuicon = $('#topCenter');
  $(startmenuicon).prepend('<img id="du" src="https://cdn4.iconfinder.com/data/icons/BRILLIANT/food/png/400/beer.png" title="Click me!" />');

  var maindiv = $('<div id="main-menu"><button id="close" style="font-weight: bold; font-size: 18px; cursor: pointer;  cursor: hand;" onclick="$(this).parent().hide();">X</button><div id="navigation"><nav><ul id="mainul"><li><a href="#">Options</a><span class="dropBottom"></span><ul><li><a href="#" id="link1">Change bg img</a></li><li><a href="#" id="link2">Shot Counter</a></li><li><a href="#" id="link3">Shot Timer</a></li><li><a href="#" id="link4">Embed </a></li><li><a href="#" id="link5">About</a></li><li><a href="#" id="link6">Contact</a></li></ul></ul></nav><div class="maine"><div id="page1" class="content"><h1>Page 1</h1><p>First Section of content.</p></div><div id="page2" class="content"><h1>Page 2</h1><p>Second section of content</p></div><div id="page3" class="content"><h1>Page 3</h1><p>Third section of content</p></div><div id="page4" class="content"><h1>Page 4</h1><p>Fourth section of content</p></div><div id="page5" class="content"><h1>Page 5</h1><p>Fifth section of content</p></div><div id="page6" class="content"><h1>Page 6</h1><p>Six section of content</p></div></div></div>');

  $('body').on('click', '#mainul a', function(e) {
    hideContentDivs();
    var tmp_div = $(e.currentTarget).parent().index();
    console.log($(e.target));
    $('.maine div').eq(tmp_div).show();
    e.preventDefault();
  });

  function hideContentDivs() {
    $('.maine div').hide();
  }
  
  hideContentDivs();
  
  $('#du').click(function() {
    var mainwindow = $('body');
    $(mainwindow).append(maindiv);
    $(maindiv).draggable({
      containment: 'body',
      scroll: false
    }).resizable({
      minWidth: 412,
      minHeight: 418,
      containment: 'body'
    });
    $(maindiv).show();
  });
});

#topCenter {
    width: 30%;
    margin: 0 auto;
    position: relative;
    z-index: 0;
}
#main-menu {
    background: rgba(255, 255, 255, .9);
    margin-top: -120px;
    font-size: 12px;
}
#mainul li {
    display: inline;
    margin-right: 1em;
}
img {
  height: 120px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>

<div id="topCenter"></div>

需要一种更好的方法来附加大量代码

Need a better way to append a large body of code

javascript

jquery

google-chrome

jquery-ui

google-chrome-extension