所以我有一堆动态加载的数据所以我必须使用类来解决这个问题。
只使用纯javascript而不是jquery,我该如何制作它,以便当您在div中点击查看更多时,它会使隐藏的div仅显示来自此父级?
答案 0 :(得分:0)
在结构上,你有几个选择。
单击.classViewMore
时,您可以获取事件的目标(很可能在this
指针中),该目标将是单击的.classViewMore
项目。
从该对象,您可以达到父对象(在您的公共父对象中获取Child
项。
从Child
,您可以找兄弟找到Hidden Child
,也可以转到.classDiv
父级,然后找到包含.classHiddenDiv
的内容。
所有关于使用DOM层次结构来查找共享公共父项的其他项目。如果没有实际的HTML,给出确切的代码有点困难,但它会是这样的:
function classViewMoreClickHandler(e) {
// find next sibling of our parent
var childElem = this.parentNode;
var hiddenChildElem = childElem.nextSibling;
}
或者,直到.classDiv父级,它看起来像这样:
function classViewMoreClickHandler(e) {
var parent = this.parentNode.parentNode;
var hiddenChild = parent.querySelectorAll(".classHiddenDiv")[0];
}
如果您定期在普通JS中工作,那么您可能需要在纯JavaScript中使用jQuery的.closest()
方法进行模拟,该方法可以找到与特定选择器匹配的祖先。真的,真的非常有用,直到一些常见的父类DOM层次结构导航。例如,您可以使用此方法制作更强大的解决方案:
function hasClass(elem, cls) {
var str = " " + elem.className + " ";
var testCls = " " + cls + " ";
return(str.indexOf(testCls) != -1) ;
}
function closest(start, cls) {
while (start && start !== document.documentElement && !hasClass(start, cls)) {
start = start.parentNode;
}
return start;
}
function classViewMoreClickHandler(e) {
var p = closest(this, ".classDiv");
if (p) {
var hiddenChild = p.querySelectorAll(".classHiddenDiv")[0];
// do whatever you want to hiddenChild here
}
}