Question

我是Jquery的新手，并不能高效地在两个函数中复制相同的代码。
是否有可能使这项功能更有效？通过有效我的意思是缩小代码。

它的作用是，在调整ID元素大小时改变它的大小为什么我需要复制两次？当我将代码留在.resize中并删除内部.ready时，元素将具有未设置的大小它的工作方式就像我会让它工作，但问题是它看起来不干净＆＃34;。

我正在使用最新的Jquery。

$(document).ready( function() {
  var files = ["home.html","test.html","random.html","noob.html"];
  var a = 0;
  var wh = $(window).height();
  var ww = $(window).width();
  var btn_n = $("#btn_nav button");
    btn_n.height(ww*0.05);
    btn_n.width(ww*0.12);
  $(window).resize(function() {
  var wh = $(window).height();
  var ww = $(window).width();
  var btn_n = $("#btn_nav button");
    btn_n.height(ww*0.05);
    btn_n.width(ww*0.12);
  });
});

Answer 1

只需将您想要在多个地方运行的代码移动到一个函数中，然后在文档准备就绪和调整大小事件上调用它。

$(document).ready( function() {
  var files = ["home.html","test.html","random.html","noob.html"];
  var a = 0;

  function layout() {
    var wh = $(window).height();
    var ww = $(window).width();
    var btn_n = $("#btn_nav button");
    btn_n.height(ww*0.05);
    btn_n.width(ww*0.12);
  }
  layout();
  $(window).resize(layout);
});

Answer 2

将逻辑放入命名函数 - 然后在页面加载时调用它，然后在窗口调整大小时再调用它。

$(document).ready( function() {
  updateSizes();
  var files = ["home.html","test.html","random.html","noob.html"];
  var a = 0;
  $(window).resize(updateSizes)

  function updateSizes(){
   var wh = $(window).height();
   var ww = $(window).width();
   var btn_n = $("#btn_nav button");
     btn_n.height(ww*0.05);
     btn_n.width(ww*0.12);
  }
});

我可以使这个Jquery调整大小功能更有效/更短/更清洁吗？

2 个答案: