使用JQuery显示/隐藏div

我有以下代码：

$(document).ready(function() {
                $('#viewAll').hide(); 
                $('#viewProductIframe').hide(); 
                $('#viewIngredientIframe').hide(); 
            $('#viewPackagingIframe').hide(); 

            $.viewMap = {
                'viewEmpty' : $('#viewEmpty'),
                'viewAll' : $('#viewAll'),
                'viewProductIframe' : $('#viewProductIframe'),
                'viewIngredientIframe' : $('#viewIngredientIframe'),
                'viewPackagingIframe' : $('#viewPackagingIframe')
            };

            $('#viewSelector').change(function() {
                // hide all
                $.each($.viewMap, function() { this.hide(); });
                // show current
                $.viewMap[$(this).val()].show();
            }); 
        });

它应该显示/隐藏一组div。实际上只有

viewProductIframe

div出现。 起初，我有4个div，没有显示数据库表的iframe。我将这些div的内容放入“viewAll”中，并添加了“viewProductIframe”和其他两个div。 这个改变显然破坏了密码，我找不到原因

我的下拉菜单：

<select name="viewSelector" id="viewSelector">
                        <option name="viewEmpty" value="viewEmpty">Select an Option</option>
                        <option name="viewAll" value="viewAll">All</option>
                        <option name="viewProductIframe" value="viewProductIframe">Products</option>
                        <option name="viewIngredientIframe" value="viewIngredientIframe">Ingredients</option>
                        <option name="viewPackagingIframe" value="viewPackagingIframe">Packaging</option>
                    </select>

选择一个选项
全部的
产品
成分
包装

显示的唯一div是：

<div id="viewProductIframe" name="viewProductIframe">
                    <h2>Product</h2>
                    <iframe src="products.php" class="displayFrame" />
                </div>

产品

另一个iframe div仍不可见：

<div id="viewIngredientIframe" name="viewIngredientIframe">
                        <h2>Ingredients</h2>
                        <iframe src="ingredients.php" class="displayFrame" />
                    </div>

成分

有人知道问题出在哪里吗？

试试下面的代码

1） 例如，为我添加的所有div设置公共类

<div id="viewProductIframe" name="viewProductIframe" class="common">
                    <h2>Product</h2>
                    <iframe src="products.php" class="displayFrame" />
                </div>

 <div id="viewIngredientIframe" name="viewIngredientIframe" class="common">
                    <h2>Ingredients</h2>
                    <iframe src="ingredients.php" class="displayFrame" />
                </div>

---

谢谢，我试过了，但唯一改变的是，当我打开页面时，产品iframe（之前显示的唯一一个）现在是可见的。我试图查看Chrome的错误控制台，但它没有显示任何内容也在外部调用。我更新了我的代码检查，我希望它能像你所期望的那样隐藏div，谢谢。：）但是选择菜单选项仍然无法显示它们。很感谢您尝试帮助我，但问题根本不在于jQuery-

不起作用。它打破了下面所有的分区。。。我把它改成了

。你的代码运行得很好。我从你的标题中删除（解决）了。被解决的问题应该接受解决问题的答案。谢谢，我真的没看到。认可的！

$(document).ready(function() {
    $(".common").hide();
    $('#viewSelector').change(function() {
                    $(".common").hide(); // hide all divs
                     var id = $(this).find("option:selected").val(); // get current val
                    $("#" + id).show() // show current div id
      }); 
});