Question

我已经编写了jQuery，你将在下面看到我正在研究的一个小项目。它完美无缺，并且完全可以设置，但是，正如你所看到的那样，它很混乱，而且......很长一段时间。

我已经尝试了一些不同的方法来清理它，但我不仅仅是忍者，它还不足以让它真的干掉它。有什么建议？先谢谢你们！

  var colspan = $(".col header span"),
      rowspan = $(".row header span"),
      topspan = $(".top header span");

  var colh2 = $(".col header h2").h2width();
  var rowh2 = $(".row header h2").h2width();
  var toph2 = $(".top header h2").h2width();

  var colwidth = 820 - colh2;
  var rowwidth = 820 - rowh2;
  var topwidth = 820 - toph2;

  colspan.css({float: 'left', width: colwidth});
  rowspan.css({float: 'left', width: rowwidth});
  topspan.css({float: 'left', width: topwidth});

Answer 1

["col", "row", "top"].forEach(function (className) {
  var str = "." + className + " header";
  var h2s = document.querySelectorAll(str + " h2");
  var spans = document.querySelectorAll(str + " span");
  var width = 820 - h2width(h2s);
  Array.prototype.forEach.call(spans, function (span) {
    span.style.float = "left";
    span.style.width = width;
  });
});

因为jQuery总是矫枉过正。

Answer 2

我会这样做吗？更短但可能没有记录清楚：

$(".col header span, .row header span, .top header span").each(function(){
    $(this).css({
        float: 'left',
        width: 820 - $(this).siblings("h2").width()
    });
});

Answer 3

简单地删除重复的代码：

$.each(['.col', '.row', '.top'], function(i, cls) {
    var width = $(cls + ' header h2').h2width();
    $(cls + ' header span').css({
        float: 'left',
        width: 820 - width
    });
});

Answer 4

只需使用一个功能：

function updateStyle(name){
   var headerSpan = $('.' + name + ' header span');
   var headerH2 = $('.' + name + ' header h2');
   headerSpan.css({float: 'left', width: 820 - headerH2.h2width()});
}

updateStyle('col');
updateStyle('row');
updateStyle('top');

Answer 5

我可能会以下列方式重写您的代码：

var conts = {
    'col': jQuery('.col header'),
    'row': jQuery('.row header'),
    'top': jQuery('.top header')
};

jQuery.each(conts, function(index, val){
    val.find('span').css({
        'float': 'left',
        'width': 820-val.find('h2').h2width()
    });
});

使用缓存主要元素，然后迭代所有这些应用类似的操作。

查看有关jQuery's .each() function的更多信息。

编辑：甚至更短：

jQuery('.col header, .row header, .top header').each(function(){
    var current = jQuery(this);
    current.find('span').css({
        'float': 'left',
        'width': 820 - current.find('h2').h2width()
    });
});

凌乱但工作jQuery

5 个答案: