Как эффективно скрыть других собратьев div с помощью jquery

Question

У меня есть выпадающий список и 5 делений вместе с ним. Мне нужно показать один конкретный дел одновременно и скрыть другой. Это мой подход Это мой код

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

А вот и мой документ .ready ()

$(document).ready(function() {
    $("#usageDropDownList").change(function() {
        if ($(this).val() == 'one') {               
            $("#two").hide();
            $("#three").hide();
            $("#four").hide();
            $("#five").hide();              
            $("#one").show();
        } else if ($(this).val() == 'two') {
            $("#one").hide();
            $("#three").hide();
            $("#four").hide();
            $("#five").hide();              
            $("#two").show();
        } else if ($(this).val() == 'three') {
            $("#one").hide();
            $("#two").hide();
            $("#four").hide();
            $("#five").hide();              
            $("#three").show();
        } else if ($(this).val() == 'four') {
            $("#one").hide();
            $("#two").hide();
            $("#three").hide();
            $("#five").hide();              
            $("#four").show();
        } else if ($(this).val() == 'five') {
            $("#one").hide();
            $("#two").hide();
            $("#three").hide();
            $("#four").hide();              
            $("#five").show();
        }
    });
});

Кто-нибудь может предложить мне лучший подход?

Answer 1

Это все, что вам нужно:

$("#" + $(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

Обновление:

Так как есть <div class="ui-select"> рядом с "числами" в вашей разметке, которые также будут скрыты (что нежелательно).Вы можете исправить это несколькими способами, вот два из них:

1: чтобы этот div не был братом, просто поместив div-обертку вокруг «чисел»:

<div> <!-- added this -->
  <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>

2:Исключите ui-select div, а именно:

$("#" + $(this).val()).show().siblings().not(".ui-select").hide();

Answer 2

Ну, просто для очистки кода:

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

Answer 3

Вы можете упростить свой код, добавив 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>

, тогда ваш код будет

$(document).ready(function() {
    $("#usageDropDownList").change(function() {
        var selected = $(this).val();
        $("#selection > div:visible").hide();
        $("#"+selected).show();
    });
});

Вы можете попробовать этот код здесь: http://jsfiddle.net/cRbUS/8/