隱藏和顯示多個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隱藏標題

回答

相關問題