如何在 1 中缩小 3 JavaScript 个函数

Question

我有3个这样的函数

$(function() {

  // Create the dropdown base
  $("<select />").appendTo("#level-2");

  // Create default option "Go to..."


  // Populate dropdown with menu items
  $("#level-2 a").each(function() {
   var el = $(this);
   $("<option />", {
       "value"   : el.attr("href"),
       "text"    : el.text()
   }).appendTo("#level-2 select");
  });

   // To make dropdown actually work
   // To make more unobtrusive: http://css-tricks.com/4064-unobtrusive-page-changer/
  $("#level-2 select").change(function() {
    window.location = $(this).find("option:selected").val();
  });

 });

但是在第二个函数中 #level-2 到处都是 #level-3。第三个功能是 #level-4 是否可以在 1 中缩小 3 个函数？可能与 if 和 else 运算符一起使用？

Answer 1

首先，您的函数被编写为在脚本加载到页面后立即执行；因此，您重复三次以使其在三个要素上起作用的原因。让我们改进并重写它，这样我们只需编写一次它就可以在任何元素上工作。我们将把重要的代码分解成一个单独的函数并调用它。我们想要运行代码反对的元素的名称被写为函数 initElement.

的参数

$(function() {
  initElement("#level-2");
  initElement("#level-3");
  initElement("#level-4");

  function initElement(element) {
    $("<select />").appendTo(element);

    $(element + " a").each(function() {
      var el = $(this);
      $("<option />", {
        "value" : el.attr("href"),
        "text"  : el.text()
      }).appendTo(element + " select");
    });

    $(element + " select").change(function() {
      window.location = $(this).find("option:selected").val();
    });  
  }
});

这不是唯一的方法，但它展示了保持事物干燥（不要重复自己）的基本思想。您可以在此基础上进一步改进。玩得开心！

如何在 1 中缩小 3 JavaScript 个函数

How to minify 3 JavaScript functions in 1

javascript

function

minify