Как сделать случай переключения для jQuery?

Ответ 1

Это просто стандартный javascript: http://www.w3schools.com/js/js_switch.asp

switch(n) {
 case 1:
  //execute code block 1
  break;
 case 2:
  //execute code block 2
  break;
 default:
 // code to be executed if n is different from case 1 and 2
}                           

где переменная switch будет именем выбранного тега

Ответ 2

В этом случае вам не нужен оператор switch, вы можете использовать текущее значение или идентификатор выбранного параметра для выбора целевого элемента:

$('#select-choice-1').change(function(){
    $('.elements').hide();
    $('#' + this.value + 'Text').show();
});

Обновление. Поскольку вы используете несколько атрибутов для элемента select, вы можете использовать метод jQuery val, он возвращает массив выбранных параметров, затем вы можете создать селектор на основе выбранных значений.

$('#select-choice-1').change(function(){
    $('div.right > div').hide();
    var selector = '#' + $(this).val().join('Text, #') + 'Text';
    $(selector).show();
});

http://jsfiddle.net/3AbJq/

Ответ 3

Нет инструкции JQuery Switch. Если вы хотите использовать оператор switch, вы можете обратиться к Javascript Switch.

Switch

Вот мой подход. я добавлю атрибут раздела данных для каждого параметра в # select-choice-1, который будет иметь идентификатор соответствующего div.

$('#select-choice-1').change(function(){
        $('#outputText').hide();
        $('#armCB').hide();
        $('#zoneText').hide();
        $('#counterText').hide();
        $('#flagText').hide();
        $('#sensorText').hide();

    //the above hide() methods can be removed if you can
    //add a class for all of these sections and say $('.sectionDivs').hide()
    var divId = $(':selected',this).data('section');
    $('#' + divId ).show();
  
    }

Ответ 4

Если это multi select, не используйте else if

$('#select-choice-1').change(function() {
    $('#outputText').hide();
    $('#armCB').hide();
    $('#zoneText').hide();
    $('#counterText').hide();
    $('#flagText').hide();
    $('#sensorText').hide();

    if ($('#output').is(':selected')) {
        $('#outputText').show();
    }
    if ($('#arm').is(':selected')) {
        $('#armCB').show();
    }
    if ($('#zone').is(':selected')) {
        $('#zoneText').show();
    }
    if ($('#counter').is(':selected')) {
        $('#counterText').show();
    }
    if ($('#flag').is(':selected')) {
        $('#flagText').show();
    }
    if ($('#sensor').is(':selected')) {
        $('#sensorText').show();
    }
});

Демо: скрипка

Вы можете упростить его до следующего, если вы можете внести некоторые изменения в разметку

$(function(){

    var $ctitems = $('#select-choice-1-items');
    var $items = $('.item', $ctitems).hide();

    $('#select-choice-1').change(function(){
        $items.hide()
        $('option:selected',this).each(function(){
            var id = $(this).attr('id');
            $('#' + id + 'Item').show()
        });
    });
});

HTML

<div id="display" style=" clear:both">
    <div class="left" style="float:left; width:48%">
        <div data-role="fieldcontain">
            <label for="select-choice-1" class="select">Select Category</label>
            <select name="select-choice-1" id="select-choice-1" data-native-menu="false" data-mini="true" multiple="multiple" size="2">
                <option value="arm" id="arm">Arm</option>
                <option value="zone" id="zone">Zone Input</option>
                <option value="output" id="output">Output</option>
                <option value="counter" id="counter">Counter</option>
                <option value="flag" id="flag">Flag</option>
                <option value="sensor" id="sensor">Sensor</option>
            </select>
        </div>
    </div>

    <div id="select-choice-1-items" class="right" style=" float: right; width:48%">
        <div id="armItem" class="item">
            <fieldset data-role="controlgroup">
                <legend>Unit</legend>
                <input type="checkbox" class="CB" name="armCB_1" id="armCB_1" class="custom" data-mini="true" />
                <label for="armCB_1">Arming Status</label>
            </fieldset>
        </div>

        <div id="outputItem" class="item">
            <p> Please enter an Output number and press "Add" button: </p>
            <input style="background: white; color: black;" type="text" id="outputTextInput" value=""/>
            <input type="submit" id="outputAdd" value="Add"/>
            <input type="submit" id="outputRemove" value="Remove"/>
        </div>
        <div id="zoneItem" class="item">
            <p> Please enter a Zone number and press "Add" button: </p>
            <input style="background: white; color: black;" type="text" id="zoneTextInput" value=""/>
            <input type="submit" id="zoneAdd" value="Add"/>
            <input type="submit" id="zoneRemove" value="Remove"/>
        </div>
        <div id="counterItem" class="item">
            <p> Please enter a counter number and press "Add" button: </p>
            <input style="background: white; color: black;" type="text" id="counterTextInput" value=""/>
            <input type="submit" id="counterAdd" value="Add"/>
            <input type="submit" id="counterRemove" value="Remove"/>
        </div>
        <div id="flagItem" class="item">
            <p> Please enter a Flag number and press "Add" button: </p>
            <input style="background: white; color: black;" type="text" id="flagTextInput" value=""/>
            <input type="submit" id="flagAdd" value="Add"/>
            <input type="submit" id="flagRemove" value="Remove"/>
        </div>
        <div id="sensorItem" class="item">
            <p> Please enter a Sensor number and press "Add" button: </p>
            <input style="background: white; color: black;" type="text" id="sensorTextInput" value=""/>
            <input type="submit" id="sensorAdd" value="Add"/>
            <input type="submit" id="sensorRemove" value="Remove"/>
        </div>
    </div>
</div>

Демо: скрипка