Question

我正在隐藏并使用Select显示多个div。当我展示div时，我也会显示它的相关标题。这一切都完美无缺，除了一件事：

当我选择＆＃34;全部显示＆＃34;我想显示内容div但不是他们的标题。所以基本上我希望显示器回到它开始的方式。只有内容项而没有标题。当您选择特定项目时，该项目必须显示其标题（如目前所示），但是当您想要查看所有项目时，内容项目必须显示而不是标题。

我试图创建一个小提琴，但得到错误＆＃34;（索引）：74 Uncaught TypeError：Illegal constructoronchange @（index）：74＆＃34;。它适用于我，但我不能让它在小提琴中工作。

<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>

Answer 1

$('#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/

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

1 个答案: