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个函数缩小为1？可以和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函数

1 个答案: