Question

实现这一点的最佳方式是什么，vanilla JavaScript。我真的很想了解它。非常感谢。

 $(duplicate[ii]).hide().siblings().show();

Answer 1

假设duplicate[ii]是一个DOM元素，你可以循环该元素父元素的子元素，并在循环后设置实际元素的样式。

const d = duplicate[ii];

for (const el of d.parentNode.children) {
  el.style.display = "block";
}
d.style.display = "none";

然而，虽然这基本上是翻译，但我不会这样写。我使用具有适当样式的类：

const d = duplicate[ii];

for (const el of d.parentNode.querySelectorAll(".hide")) {
  el.classList.remove("hide");
}
d.classList.add("hide");

.hide {
  display: none;
}

如果您知道在任何给定时间只有一个元素会有hide，您可以放弃循环。

const h = duplicate[ii].parentNode.querySelector(".hide")
if (h) {
  h.classList.remove("hide");
}
duplicate[ii].classList.add("hide");

如果经常这样做，我会创建一个实用程序函数来接收类名，元素和集合。你甚至可以增强它，使集合是可选的，在这种情况下你可以使用兄弟姐妹。

function swapClass(clss, target, els) {
    if (!els) {
      els = target.parentNode.children;
    }

    for (const el of els) {
      el.classList.remove(cls);
    }
    target.classList.add(cls);
}

然后它就像这样：

swapClass("hide", duplicate[ii]);

Answer 2

const toArray = (list) => Array.prototype.slice.call(list)

const foo = (node) => {
    let children = toArray(node.parentNode.children)
    children.forEach(child => {
        child.style.display = child === node ? 'none' : 'block'
    })
}

如果duplicate[ii]是DOM，则只需foo(duplicate[ii])

如果duplicate[ii]是Css选择器，您可以使用

toArray(document.querySelectorAll(selector)).forEach(node => {
    foo(node)
})

这个答案假设节点是Block元素

兄弟姐妹纯粹的JavaScript与show和hide，现在是jQuery

2 个答案: