兄弟姐妹纯净的JavaScript与Show and Hide，现在是JQuery

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元素