使用jQuery选择显示/隐藏多个DIV

Question

我基本上和下面问题中的人有相同的情况:

链接:如何通过选择显示/隐藏div.(jquery)

通过在Google内进行广泛搜索,我能够提出几种不同的方法,让人们声称他们的方法有效.我还没有正常工作.我还不太了解jQuery来完全理解如何从头开始编写这个,因此我现在依赖于非常好的例子.

我一直在努力(根据我发现和尝试的例子)是这样的:

<script type="text/javascript">
    (document).ready(function() {
        ('.box').hide();<br/>
        ('#dropdown').change(function() {
        ('#divarea1')[ ($(this).val() == 'area1') ? 'hide' : 'show' ]()
        ('#divarea2')[ ($(this).val() == 'area2') ? 'hide' : 'show' ]()
        ('#divarea3')[ ($(this).val() == 'area3') ? 'hide' : 'show' ]()
        });
    });
</script>
<form>
    <select id="dropdown" name="dropdown">
        <option value="0">Choose</option>
        <option value="area1">DIV Area 1</option>
        <option value="area2">DIV Area 2</option>
        <option value="area3">DIV Area 3</option>
    </select>
</form>
<div id="divarea1" class="box">DIV Area 1</div>
<div id="divarea2" class="box">DIV Area 2</div>
<div id="divarea3" class="box">DIV Area 3</div>

• 注意:我使用括号而不是html周围的小于号和大于号的符号在此消息中正确显示.

我测试时得到的结果:

• 首次加载时未选择任何内容=>不显示DIV.
• 当我选择DIV区域1 => DIV区域2和3时显示.
• 当我选择DIV Area 2 => DIV时,显示区域1和3.
• 当我选择DIV区域3 => DIV时,显示区域1和2.

我的大脑一天都在炒.我该怎么做才能解决这个问题？

Answer 1

我这样做:

<script type="text/javascript">
$(document).ready(function(){
 $('.box').hide();
  $('#dropdown').change(function() {
    $('.box').hide();
    $('#div' + $(this).val()).show();
 });
});
</script>
<form>
 <select id="dropdown" name="dropdown">
  <option value="0">Choose</option>
  <option value="area1">DIV Area 1</option>
  <option value="area2">DIV Area 2</option>
  <option value="area3">DIV Area 3</option>
 </select>
</form>
<div id="divarea1" class="box">DIV Area 1</div>
<div id="divarea2" class="box">DIV Area 2</div>
<div id="divarea3" class="box">DIV Area 3</div>

Answer 2

交换显示/隐藏，使其看起来像这样：

$('#divarea1')[ ($(this).val() == 'area1') ? 'show' : 'hide' ]()