Question

我在这个网站上使用第三方购物模块，因此我无法修改此模块的源代码。

Everthing工作正常，但这是我的问题。在结帐选项中，摘要包含多余的字段，我想隐藏这些字段。

Discount:  GBP £0.00
Sub total: GBP £90.00
Shipping:  GBP £10.00
Handling:  GBP £0.00
Total:     GBP £100.00

如上所示，只有3个字段具有值。我想使用Javascript并隐藏没有任何值的字段，如“折扣”，“运输”和“处理”。

以下是我的代码{/ 3}}

这是我的代码

<div class="CartTotalAmountContainer">
    <div class=" TotalSalesOrderDetailDiscountAmount">
        <div>
            <label> <span>Discount:</span> 
            </label>
        </div>  <span>GBP £0.00</span>

    </div>
    <div class="SubTotalAmount">
        <div>
            <label> <span>Sub total:</span> 
            </label>
        </div>  <span>GBP £90.00</span>

    </div>
    <div class="TotalShippingAmount">
        <div>
            <label> <span>Shipping:</span> 
            </label>
        </div>  <span>GBP £10.00</span>

    </div>
    <div class="TotalHandlingAmount">
        <div>
            <label> <span>Handling:</span> 
            </label>
        </div>  <span>GBP £0.00</span>

    </div>
    <div class="TotalAmount">
        <div class="dnnLabel">
            <label> <span>Total:</span> 
            </label>
        </div>  <span>GBP £100.00</span>

    </div>
</div>

我的逻辑是，我可以使用

访问元素的顶部容器

var X= document.getElementsByClassName("CartTotalAmountContainer");

但是如何访问单个跨度内的数据并为其父div设置style =“display：none”。

Answer 1

尝试.querySelector：

var x = document.querySelectorAll(".CartTotalAmountContainer > div > span");

for(var i=0; i<x.length; i++) {
    if(x[i].innerHTML == "GBP £0.00") {
        x[i].style.display = "none";
    }
}

Demo!

以下是ya的一些解读：https://developer.mozilla.org/en-US/docs/Web/API/Document.querySelectorAll

Answer 2

这是一个完整的原生JS解决方案，适用于IE8及以下版本：jsFiddle：http://jsfiddle.net/giri_jeedigunta/46QyE/ var outerDiv = document.getElementsByTagName('div'), cartContainer, i, j, cartInnerContent; // Since getElementsByclassName doesnt work in IE8: for(i = 0; i < outerDiv.length; i++) { if(outerDiv[i].className === 'CartTotalAmountContainer') { cartContainer = outerDiv[i]; cartInnerContent = cartContainer.getElementsByTagName('div'); break; } }



// Queryselector have limitations in IE8 and below
for(j = 0; j < cartInnerContent.length; j++) {
    if(typeof cartInnerContent[j].getElementsByTagName('span')[1] !== 'undefined') {
        var spanContent = cartInnerContent[j].getElementsByTagName('span')[1].innerHTML, 
            priceSplit = spanContent.split('£')[1].split('.')[0];
            console.log(priceSplit);

        if(parseInt(priceSplit) === 0) {
            cartInnerContent[j].style.display = 'none';
        }

    }
}

// Queryselector have limitations in IE8 and below for(j = 0; j < cartInnerContent.length; j++) { if(typeof cartInnerContent[j].getElementsByTagName('span')[1] !== 'undefined') { var spanContent = cartInnerContent[j].getElementsByTagName('span')[1].innerHTML, priceSplit = spanContent.split('£')[1].split('.')[0]; console.log(priceSplit); if(parseInt(priceSplit) === 0) { cartInnerContent[j].style.display = 'none'; } } }

如何使用javascript隐藏元素

2 个答案: