Javascript 如何使用jquery有效地隐藏其他div成员

我有一个下拉列表和5个div。我需要一次显示一个特定div，另一个隐藏。这是我的方法 这是我的密码

<div data-role="content">
    <div id="tab-1">
        <br />
        <div id="one" style="width: device-width; height: 150px;"></div>
        <div id="two" style="width: device-width; height: 150px;"></div>
        <div id="three" style="width: device-width; height: 150px;"></div>
        <div id="four" style="width: device-width; height: 150px;"></div>
        <div id="five" style="width: device-width; height: 150px;"></div>
        <div class="ui-select">
            <select name="usageDropDownList" id="usageDropDownList"
                data-native-menu="false" tabindex="-1">
                <option value="one">1</option>
                <option value="two">2</option>
                <option value="three">3</option>
                <option value="four">4</option>
                <option value="five">5</option>
            </select>
</div</div>

有谁能给我建议一个更好的方法吗？

这就是您所需要的：

$("#" + $(this).val()).show().siblings().hide();

分项数字：

$("#" + $(this).val())  // selects div with id equal to value of selected option
.show()                 // shows it
.siblings()             // then selects all of the other divs next to it
.hide()                 // and hides them

更新：

由于标记中的“number”div旁边还有

，因此该div也将被隐藏（这是不可取的）。您可以通过多种方式解决此问题，以下是两种：

1：通过简单地在“数字”周围放置一个包装器div，使该div不是兄弟：

这就是您所需要的：

$("#" + $(this).val()).show().siblings().hide();

分项数字：

$("#" + $(this).val())  // selects div with id equal to value of selected option
.show()                 // shows it
.siblings()             // then selects all of the other divs next to it
.hide()                 // and hides them

更新：

由于标记中的“number”div旁边还有

，因此该div也将被隐藏（这是不可取的）。您可以通过多种方式解决此问题，以下是两种：

1：通过简单地在“数字”周围放置一个包装器div，使该div不是兄弟：

---

好吧，就像清理代码一样：

$('#one, #two, #three, #four, #five').hide();
$('#'+$(this).val()).show();

编辑：然后尝试以下操作：

​$('#tab-1 ​​​div').each(function() {
    if($(this).attr('id').length != -1) {
        $(this).hide();
    }
});​​​
$('#'+$(this).val()).show();

---

好吧，就像清理代码一样：

$('#one, #two, #three, #four, #five').hide();
$('#'+$(this).val()).show();

编辑：然后尝试以下操作：

​$('#tab-1 ​​​div').each(function() {
    if($(this).attr('id').length != -1) {
        $(this).hide();
    }
});​​​
$('#'+$(this).val()).show();

---

添加div可以简化代码

<div data-role="content">
    <div id="tab-1">
        <br />
        <div id="selection">       
            <div id="one" style="width: device-width; height: 50px;">A</div>
            <div id="two" style="display:none; width: device-width; height:50px;">B</div>
            <div id="three" style="display:none; width: device-width; height: 50px;">C</div>
            <div id="four" style="display:none; width: device-width; height: 50px;">D</div>
            <div id="five" style="display:none; width: device-width; height: 50px;">E</div>
        </div>
        <div class="ui-select">
            <select name="usageDropDownList" id="usageDropDownList">
                <option value="one">1</option>
                <option value="two">2</option>
                <option value="three">3</option>
                <option value="four">4</option>
                <option value="five">5</option>
            </select>
        </div>
    </div>
</div>

---

您可以在此处尝试此代码：

您可以简化添加div的代码

<div data-role="content">
    <div id="tab-1">
        <br />
        <div id="selection">       
            <div id="one" style="width: device-width; height: 50px;">A</div>
            <div id="two" style="display:none; width: device-width; height:50px;">B</div>
            <div id="three" style="display:none; width: device-width; height: 50px;">C</div>
            <div id="four" style="display:none; width: device-width; height: 50px;">D</div>
            <div id="five" style="display:none; width: device-width; height: 50px;">E</div>
        </div>
        <div class="ui-select">
            <select name="usageDropDownList" id="usageDropDownList">
                <option value="one">1</option>
                <option value="two">2</option>
                <option value="three">3</option>
                <option value="four">4</option>
                <option value="five">5</option>
            </select>
        </div>
    </div>
</div>

---

您可以在此处尝试以下代码：

Hi@Jon如果我编写了您的代码，那么我的下拉列表也会隐藏。我不想那样。我希望将下拉列表排除在外。：）是的，使用sides（）选择的不仅仅是要隐藏的div。@Jon您的第二种方法还不起作用。但您的第一种方法是有效的：）。可能是因为您在隐藏兄弟div后排除了一个类…@Coder\u sLaY:。也许你的HTML和你在这里发布的不完全一样？我先排除，然后隐藏…@Jon我已经给了你我使用的确切代码。虽然我可能正在使用jquery mobile，所以它不起作用。我不能说…嗨@Jon如果我写了你的代码，那么我的下拉列表也会隐藏起来。我不想那样。我希望将下拉列表排除在外。：）是的，使用sides（）选择的不仅仅是要隐藏的div。@Jon您的第二种方法还不起作用。但您的第一种方法是有效的：）。可能是因为您在隐藏兄弟div后排除了一个类…@Coder\u sLaY:。也许你的HTML和你在这里发布的不完全一样？我先排除，然后隐藏…@Jon我已经给了你我使用的确切代码。虽然我可能正在使用jquery mobile，所以它不起作用。我不能说…不，这也很好。但我想要更少的硬编码值。效率更高…虽然你的答案比我的方法好，所以+1:）不，这也很好。但我想要更少的硬编码值。效率更高…虽然您的答案比我的方法更好，所以+1:）