Question

我有一个产品列表，其结构类似于以下HTML。

我正在尝试选择包含类名为class="www-components-menu-product-list--item_DgfZL"的元素的class="www-components-product-card--cbd_2luC9"元素。

然后我想在点击功能中隐藏这些元素。

请注意。我在页面上有很多这些项目，该功能应该适用于所有潜在的元素，而不仅仅是我在示例中的两个元素。

我已经了解了如何使用Jquery做到这一点，但我试图在这里避免使用Jquery。

这是我尝试使用javascript。

var itemClass = document.getElementsByClassName("www-components-menu-product-list--item_DgfZL");

for (i = 0; i < itemClass.length; i++) {

      var insideItemClass = itemClass.getElementsByClassName("www-components-product-card--hybrid_2AD7v");

        for (i = 0; i < insideItemClass.length; i++) {

            insideItemClass.style.display = "none";

        }

}

HTML结构：

<div class="www-components-menu-product-list--item_DgfZL">

    <div class="www-components-product-card--card_2mjWk">


        <div>

            <div class="www-components-product-card--hybrid_2AD7v www-components-product-card--backdrop_Nq0th" style="opacity: 1; transform: translateY(62%);">

            </div>


            <div class="www-components-product-card--description_3un8n" style="height: 38%;">

            </div>

        </div>

    </div>

</div>


<div class="www-components-menu-product-list--item_DgfZL">

    <div class="www-components-product-card--card_2mjWk">


        <div>

            <div class="www-components-product-card--cbd_2luC9 www-components-product-card--backdrop_Nq0th" style="opacity: 1; transform: translateY(62%);">

            </div>


            <div class="www-components-product-card--description_3un8n" style="height: 38%;">

            </div>

        </div>

    </div>

</div>




<div class="www-components-menu-product-list--item_DgfZL">

    <div class="www-components-product-card--card_2mjWk">


        <div>

            <div class="www-components-product-card--cbd_2luC9 www-components-product-card--backdrop_Nq0th" style="opacity: 1; transform: translateY(62%);">

            </div>


            <div class="www-components-product-card--description_3un8n" style="height: 38%;">

            </div>

        </div>

    </div>

</div>

我的错误

01:26:25.549 menubest.html:2923 Uncaught TypeError: itemClass.getElementsByClassName is not a function
    at HTMLDivElement.<anonymous> (menubest.html:2923)

Answer 1

使用它：

itemClass[i].getElementsByClassName
insideItemClass[i].style.display = "none";

而不是

itemClass.getElementsByClassName
insideItemClass.style.display = "none";

完整代码：

    var itemClass = document.getElementsByClassName("www-components-menu-product-list--item_DgfZL");

for (i = 0; i < itemClass.length; i++) {

      var insideItemClass = itemClass[i].getElementsByClassName("www-components-product-card--hybrid_2AD7v");

      if(insideItemClass.length > 0){
        itemClass.item(i).style.display = "none";
      }
}

这是小提琴：https://jsfiddle.net/jeL0fezh/8/

按类别选择具有javascript

1 个答案: