Question

我有类似的代码，但只是有点不同。如何缩短以下代码？

以下示例

var sms = document.getElementsByClassName("class-two");
sms.forEach(function(e) {
  e.style.width = 200 + 'px';
});

var sms = document.getElementsByClassName("class-one");
sms.forEach(function(e) {
  e.style.height = 100 + 'px';
});

以上两者之间的区别仅在于class-one和class-two以及两行e.style.width = 200 + 'px';和e.style.height = 100 + 'px';，我可以在这里使用循环以及如何使用循环？

Answer 1

坚持DRY (Don't Repeat Yourself) principle，您可以编写一个函数来封装冗余代码：

df <- structure(list(V1 = c(1152652L, 1051495L, 1195877L), V2 = c(1152652L, 
1051495L, 1195877L), V3 = c(0L, 0L, 0L), V4 = c(0L, 0L, 0L), 
    V5 = c(2L, 2L, 2L), V6 = c(-9L, -9L, -9L), V7 = c("1 1", 
    "1 1", "1 1"), V8 = c("2 2", "2 2", "2 2"), V9 = c("0 0", 
    "0 0", "0 0"), V10 = c("2 2", "2 2", "2 2"), V11 = c("1 1", 
    "1 1", "1 1")), .Names = c("V1", "V2", "V3", "V4", "V5", 
"V6", "V7", "V8", "V9", "V10", "V11"), class = "data.frame", row.names = c(NA, 
-3L))
##       V1      V2 V3 V4 V5 V6  V7  V8  V9 V10 V11
##1 1152652 1152652  0  0  2 -9 1 1 2 2 0 0 2 2 1 1
##2 1051495 1051495  0  0  2 -9 1 1 2 2 0 0 2 2 1 1
##3 1195877 1195877  0  0  2 -9 1 1 2 2 0 0 2 2 1 1

Answer 2

使用Array#forEach并创建一个可以使用类，样式属性和值调用的函数。

function setThings(cls, attr, value) {
    [].forEach.call(document.getElementsByClassName(cls), function(el) {
        el.style[attr] = value;
    });
}
setThings("class-two", 'width', '200px');
setThings("class-one", 'height', '100px');

然而，即使在解决了对forEach

的滥用问题之后

[].forEach.call(document.getElementsByClassName("class-two"), function(e) {
  e.style.width = '200px';
});

[].forEach.call(document.getElementsByClassName("class-one"), function(e) {
  e.style.height = '100px';
});

实际上是更短的代码，除非函数（setThings）以单个字符命名，那么第一个答案更短

Answer 3

在你正在做的事情上直接在元素上设置CSS样式被认为是不好的做法，并且没有必要。您可以通过智能地使用CSS来大大简化代码，将JS的数量减少到基本上一行，以在更高级别的元素上切换类，从而驱动子元素的宽度或高度，从而消除对循环或函数的任何需求。您编写，调试和维护的代码较少。本质上，你不是自己在JS中找到具有特定类的所有元素，而是让CSS引擎做到这一点，这就是它为生活所做的事情！

＆＃13;

const topElement = document.getElementById('top');
const buttonElement = document.getElementById('button');

function toggle() { topElement.classList.toggle('narrow'); }

buttonElement.addEventListener('click', toggle);

＆＃13;

.class-one, .class-two { width: 300px; height: 16px; }
.class-one { background: red; }
.class-two { background: blue; }

.narrow .class-one { width: 200px; }
.narrow .class-two { height: 100px; }

＆＃13;

<div id="top">
  <div class="class-one"></div>
  <div class="class-two"></div>
</div>

<button id="button">Toggle</button>

＆＃13;

Answer 4

@qxz答案似乎最好。但是如果你想避免函数调用，请参考：

[].forEach.call(document.querySelectorAll('.class-two,.class-one'), function(e) {
  if (e.className.includes("class-two")) {
    e.style.width = "200px";
  };
  if (e.className.includes("class-one")) {
    e.style.height = "100px";
  };
});

你fiddle

如何循环和缩短代码

4 个答案: