你如何针对这个家长,从一个孩子到另一个孩子的div节目,只使用纯javascript的课程?

时间:2014-09-29 02:46:53

标签: javascript angularjs

所以我有一堆动态加载的数据所以我必须使用类来解决这个问题。

只使用纯javascript而不是jquery,我该如何制作它,以便当您在div中点击查看更多时,它会使隐藏的div仅显示来自此父级?

enter image description here

1 个答案:

答案 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
    }
}