兄弟姐妹纯JavaScript与显示和隐藏，现在jQuery

什么是实现这个，香草JavaScript的最佳方式。我真的很想理解它。非常感谢。兄弟姐妹纯JavaScript与显示和隐藏，现在jQuery

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

来源

2017-08-31 NemanjaD

一个接一个地实现它。首先'隐藏（）'。然后获取兄弟姐妹。然后显示所有这些。 Stackoverflow不是免费的jquery->原生DOM代码转换服务。 – zerkms

这很复杂，如果你在谈论宽松和一切。简单地说，您只需查看'Element.childNodes'确定'Element.childNodes [increment] .nodeType === 1'并且生成'Element.childNodes [increment] .style.opacity = opacityIncrement'。为了向后兼容，您可以实现'Element.childNodes [increment] .style.filter ='alpha（opacity ='+ alphaIncrement +'）''。 – PHPglue

假设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]);

来源

2017-08-31 00:56:06 spanky

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

来源

2017-08-31 01:55:28 SantinoDu

兄弟姐妹纯JavaScript与显示和隐藏，现在jQuery

回答

相关问题