隐藏和显示多个div并使用jQuery隐藏标题

我隐藏并显示带有Select的多个div。当我显示一个div时，我也会显示它的相关标题。除了一件事外，这一切都很完美：隐藏和显示多个div并使用jQuery隐藏标题

当我选择“全部显示”时，我想显示内容div，但不显示其标题。所以基本上我希望显示器能够回到它开始的方式。只有内容项目和没有标题。当你选择一个特定的项目时，那个项目必须显示它的标题（就像它目前所做的那样），但是当你想要看到所有项目时，内容项目必须显示，而不是标题。我试图创建一个小提琴，但得到错误“（索引）：74 Uncaught TypeError：非法constructoronchange @（索引）：74”。它对我来说工作得很好，但我无法在小提琴中工作。

<script type="text/javascript"> 
/*<![CDATA[*/ 

function Selection(sel,cls){ 
var objs=bycls(cls),z0=0; 
for (;z0<objs.length;z0++){ 
    objs[z0].style.display=objs[z0].className.indexOf(sel.value)>-1||sel.value=='ShowAll'?'block':'none'; 
} 
} 

function bycls(nme){ 
    for (var reg=new RegExp('\\b'+nme+'\\b'),els=document.getElementsByTagName('DIV'),ary=[],z0=0; z0<els.length;z0++){ 
    if(reg.test(els[z0].className)){ 
    ary.push(els[z0]); 
    } 
    } 
    return ary; 
}     
/*]]>*/ 
</script> 

<div> 
    <form class="form-inline"> 
    <label for="show">Show</label> 
    <select name="type" onchange="Selection(this,'Selection');" class="form-control" style="width: 150px;" id="show"> 
    <option value="ShowAll">Show All</option> 
    <option value="Selection2">Only 2</option> 
    <option value="Selection3">Only 3</option> 
    <option value="Selection4">Only 4</option> 
    <option value="Selection5">Only 5</option> 
    </select> 
    </form> 
</div> 

<!--- HEADING FOR DIV 2 ---> 
<div class="Selection Selection2" style="display: none;"> 
    <h2>Heading 2</h2> 
</div> 

<!--- HEADING FOR DIV 3 ---> 
<div class="Selection Selection3" style="display: none;"> 
    <h2>Heading 3</h2> 
</div> 

<!--- HEADING FOR DIV 4 ---> 
<div class="Selection Selection4" style="display: none;"> 
    <h2>Heading 4</h2> 
</div> 

<!--- HEADING FOR DIV 5 ---> 
<div class="Selection Selection5" style="display: none;"> 
    <h2>Heading 5</h2> 
</div> 

<!--- CONTENT FOR DIV 2 ---> 
<div class="Selection Selection2"> 
    <p>Content for 2</p> 
</div> 

<!--- CONTENT FOR DIV 3 ---> 
<div class="Selection Selection3"> 
    <p>Content for 3</p> 
</div> 

<!--- CONTENT FOR DIV 4 ---> 
<div class="Selection Selection4"> 
    <p>Content for 4</p> 
</div> 

<!--- CONTENT FOR DIV 5 ---> 
<div class="Selection Selection5"> 
    <p>Content for 5</p> 
</div>

来源

2016-07-14 Marthinus Strydom

你使用的是Jquery吗？ https://jsfiddle.net/cxj9yj8p/ – DaniP

太棒了！谢谢 –

@DaniP我很困惑。我的小提琴不想工作，但我完全复制你的。 https://jsfiddle.net/MarthinusStrydom/fwcecmqv/ –

$('#show').on('change', function(){ 
var val = $(':selected',this).attr('value'); 
if (val === 'ShowAll') { 
$('.Selection').show() 
$('.Selection').has('h2').hide(); 
} else { 
$('.Selection').hide() 
$('.'+val).show() 
} 
})

由于DaniP的溶液。小提琴在这里：https://jsfiddle.net/cxj9yj8p/

来源

2016-07-14 21:37:59

隐藏和显示多个div并使用jQuery隐藏标题

回答

相关问题