javascript - 是否可以重构普通 JS DOM 操作

Question

我想知道是否可以以干净、漂亮的方式重构以下代码，以避免每个 is 语句的重复:

if (statement) {
    menu.style.display = "inline-block";
    emoji.style.display = "inline-block";
    del.style.display = "block";
    upload.style.display = "block";
} else if (statement) {
    menu.style.display = "none";
    emoji.style.display = "inline-block";
    del.style.display = "none";
    upload.style.display = "none";
} else {
    menu.style.display = "none";
    emoji.style.display = "none";
    del.style.display = "none";
    upload.style.display = "none";
}

我知道我可以进行对象解构，但我也想减少行数，因为我在代码中多次重复了这种和平的代码。

Answer 1

一种选择是创建一个元素数组，并将其所有样式设置为none，然后在条件内设置不会的样式是无:

[menu, emoji, del, upload].forEach(elm => elm.style.display = "none");
if (statement) {
  menu.style.display = "inline-block";
  emoji.style.display = "inline-block";
} else if (statement) {
  emoji.style.display = "inline-block";
}

如果您经常想要更改多个元素的样式，请考虑使用函数:

const setAllDisplays = (display, ...elms) => elms.forEach(elm => elm.style.display = display);
setAllDisplays('none', menu, emoji, del, upload);
if (statement) {
  setAllDisplays("inline-block", menu, emoji);
} else if (statement) {
  emoji.style.display = "inline-block";
}