Javascript根据标准集显示/隐藏多个类

时间:2016-10-25 16:41:35

标签: javascript c# html

我使用了一些JS,它隐藏某些字段,这些字段基于使用隐藏ID设置的类型,然后隐藏字段并给它一个display =" none"。

问题是我在单个产品详细信息页面上使用了这个,现在需要做同样的概念,但是在动态结果页面中有多个id,所以我想要使用相同的概念在这里,我正在使用的代码片段如下,任何调整/更好的方式,能够根据不同的id(在不同的类型将显示的情况下)重新调整它以在一个页面上重复使用多个项目非常感谢搜索结果页面!

我使用的JS就在这里:

else if (proptype.textContent == "3628") {   
        document.getElementById("spbeds").style.display = "none";
        document.getElementById("spbaths").style.display = "none";
        document.getElementById("spbuild").style.display = "none";
        document.getElementById("spterr").style.display = "none";
        document.getElementById("sppool").style.display = "none";
        document.getElementById("sp2beds").style.display = "none";
        document.getElementById("sp2baths").style.display = "none";
        document.getElementById("sp2build").style.display = "none";
        document.getElementById("sp2terr").style.display = "none";
        document.getElementById("sp2pool").style.display = "none";
    }

结果是:

<div class="property-amenities hidden-sm hidden-xs clearfix">
                                    <span><strong>00RN4</strong>Reference</span>
                                    <span id="sp2beds" style="display: none;"><strong>0</strong>Bedrooms</span>
                                    <span id="sp2baths" style="display: none;"><strong>0</strong>Bathrooms</span>
                                    <span id="sp2build" style="display: none;"><strong>0m²</strong>Build</span>
                                    <span id="sp2terr" style="display: none;"><strong>0m²</strong>Terrace Size</span>
                                    <span id="sp2plot"><strong>0m²</strong>Plot</span>
                                    <span id="sp2pool" style="display: none;"><strong>No</strong>Pool</span>
                                    <span id="sp2zone"><strong>None </strong>Planning Zone</span>
                                    <span><strong>150.000€</strong>Price</span>
                                </div>

1 个答案:

答案 0 :(得分:0)

你可以做这样的事情

检查以下代码段

&#13;
&#13;
window.onload=function(){
 
  var parent=document.getElementsByClassName('parent');
  
var divs=parent[0].querySelectorAll('div');
divs.forEach(function(div){
  var id=div.getAttribute('id');
  document.getElementById(id).style.display="none";
});
}
&#13;
<div class="parent"> 
  <div id="div1">div1</div>
  <span id="span1">span1</span>
  
  <div id="div2">div2</div>
  <span id="span2">span2</span>
  
  <div id="div3">div3</div>
  <span id="span3">span3</span>
  
  <div id="div4">div4</div>
  <span id="span4">span4</span>
</div>
&#13;
&#13;
&#13;

希望有所帮助