Question

我对使用jquery相当新，我只是想知道是否有人可以给我一些关于如何使我的代码更清洁并且没有那么多重复代码行的指针。

我有这个功能，我认为可以更精简。基本上所有这些代码都根据浏览器宽度调整了一堆div。它还具有700px和450px的断点，其中框分别从3列到2列再到1列。

如果任何人有任何想法如何我可以减少这些代码，使其更清洁，更可靠，这将是伟大的。提前谢谢。

$(window).on("load resize",function (boxsize){

if ($(".content-padding").actual( 'width' ) > 700){
    if (!$(".work-buttons").hasClass("three-wide")){$(".work-buttons").addClass("three-wide",1000, "easeInOutQuart") };
    $(".work-buttons").removeClass("one-wide two-wide").width($(".content-padding").actual( 'width' )/3 - 20).height($(".work-buttons").actual( 'width' )*.75); 
}
else if ($(".content-padding").actual( 'width' ) > 450 && $(".content-padding").actual( 'width' ) <= 700){
    if (!$(".work-buttons").hasClass("two-wide")){$(".work-buttons").addClass("two-wide",1000, "easeInOutQuart"); };
    $(".work-buttons").removeClass("one-wide three-wide").width($(".content-padding").actual( 'width' )/2 - 15).height($(".work-buttons").actual( 'width' )*.75); 
}
else if ($(".content-padding").actual( 'width' ) <= 450){
    $(".work-buttons").removeClass("two-wide three-wide"); 
    if (!$(".work-buttons").hasClass("one-wide")){$(".work-buttons").addClass("one-wide",1000, "easeInOutQuart"); };
    $(".work-buttons").removeClass("two-wide three-wide");.width($(".content-padding").actual( 'width' )).height($(".work-buttons").actual( 'width' )*.75);
}
else{}
});

Answer 1

首先修复大括号并绑定$（＆＃34; .work-buttons＆＃34;）;变量：
```
var divElement = $(".work-buttons");
```

removeClass可以使用多个参数：

divElement.removeClass("one-wide two-wide");

您可以链宽和高度：
```
divElement.width(...).height(...);
```
我可以看到你的身高没有变化，所以要宣告它的全部功能：
```
var divHeight = divElement.actual( 'width' )*.75;
```
上次if是多余的，因为它还需要采取任何措施。因此，您始终设置宽度和高度，因此将其置于条件之外。

对于内心＆＃34;有......＆＃34;检查你可以创建一个函数，例如：

 function checkIfHasClass(someDiv, someClass) {
     if (!someDiv.hasClass(someClass)) {
        someDiv.addClass(someClass, 1000, "easeInOutQuart") 
     };
 }

您也可以通过许多其他方式声明它，但这个是最简单的。

我还没有看到jQuery的函数addClass有三个参数，所以我猜你的意思只是最简单的一个：

function checkIfHasClass(someDiv, someClass) {
     if (!someDiv.hasClass(someClass)) {
        someDiv.addClass(someClass) 
     };
}

每次都使用contentElement.actual('width')，将其放入变量：
```
var contentElementWidth = contentElement.actual('width');
```

现在，如果你愿意，你可以实际链接函数和声明，虽然它有时会损害可读性，f.e：

 var divElement = $(".work-buttons"),
     contentElement = $('.content-padding'),
     divHeight = divElement.actual( 'width' )*.75,
     divWidth = 0,
     contentElementWidth = contentElement.actual('width');

放入一些（假的，因为它们实际上是变量）常量并不是一个坏主意：
```
 var WIDTH = "width";
```

最后我们得到类似的东西：

$(window).on("load resize",function (boxsize) {
    var WIDTH = "width",
        ONE_WIDE = "one-wide",
        TWO_WIDE = "two-wide",
        THREE_WIDE = "three-wide";

    var divElement = $(".work-buttons"),
        contentElement = $('.content-padding'),
        divHeight = divElement.actual(WIDTH)*.75,
        divWidth = 0,
        contentElementWidth = contentElement.actual(WIDTH);

    if (contentElementWidth > 700) {
        divElement.removeClass("two-wide one-wide");         
        checkIfHasClass(divElement, THREE_WIDE) 
        divWidth = contentElementWidth/3 - 20;

    } else if (contentElementWidth > 450 
               && contentElementWidth <= 700) {

        divElement.removeClass("three-wide one-wide"); 
        checkIfHasClass(divElement, TWO-WIDE);
        divWidth = contentElementWidth/2 - 15;
     } else {
        divElement.removeClass("three-wide two-wide");                
        checkIfHasClass(divElement, ONE-WIDE);
        divWidth = contentElementWidth;
      } 

      divElement.width(divWidth).height(divHeight);
});

function checkIfHasClass(someDiv, someClass) {
    if (!someDiv.hasClass(someClass)) {
       someDiv.addClass(someClass) 
    };
}

Answer 2

以下是一些改进：

在变量中缓存元素，以避免过多的DOM访问
将您的来电链接以减少行数
充分利用方法：他们有时会接受多个参数
带有动画doesn't exist in jQuery的函数addClass。

以下是解释这些概念的示例代码：

var work_button = $('.work-buttons'),
    content_padding = $(".content-padding");

if (content_padding.actual('width') > 700) {
    work_button
        .removeClass("two-wide one-wide")
        .width(content_padding.actual('width') / 3 - 20)
        .height(work_button.actual('width') * .75)
        .addClass("three-wide");
}

减少冗余的jQuery代码

2 个答案: