web-dev-qa-db-fra.com

Comment faire un switch case pour jQuery?

J'ai cette déclaration if-else qui m'a donné une réponse bizarre ... chaque fois que je sélectionne "sortie" en premier, rien d'autre sélectionné après ne peut apparaître ... comme je veux.

 $('#outputText').hide();
    $('#armCB').hide();
    $('#outputCB').hide();
    $('#zoneText').hide();
    $('#counterText').hide();
    $('#flagText').hide();
    $('#sensorText').hide();

('#select-choice-1').change(function(){
        if ($('#output').is(':selected')){
            $('#outputText').show();
        }
        else if ($('#arm').is(':selected')){
            $('#armCB').show();
        }
        else if ($('#zone').is(':selected')){
            $('#zoneText').show();
        }
        else if ($('#counter').is(':selected')){
            $('#counterText').show();
        }
        else if ($('#flag').is(':selected')){
            $('#flagText').show();
        }
        else if ($('#sensor').is(':selected')){
            $('#sensorText').show();
        }
        else{
            $('#outputText').hide();
            $('#armCB').hide();
            $('#zoneText').hide();
            $('#counterText').hide();
            $('#flagText').hide();
            $('#sensorText').hide();

        }

Y at-il une erreur dans ma déclaration if-else? ou dois-je utiliser la déclaration d'instance Switch ici? Si oui, comment devrais-je le faire?

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 class="right" style=" float: right; width:48%">
             <div id="armCB">
                <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="outputText">
                <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="zoneText">
                <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="counterText">
                <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="flagText">
                <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="sensorText">
                <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>
jqueryif-statementswitch-statement
10
yvonnezoe

C’est juste du javascript standard: 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
}

où variable sera le nom de la balise sélectionnée

15
Martin V.

Vous n'avez pas besoin d'instruction switch dans ce cas, vous pouvez utiliser la valeur actuelle ou l'id de l'option sélectionnée pour sélectionner l'élément cible:

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

Update: Comme vous utilisez plusieurs attributs pour l'élément select, vous pouvez utiliser la méthode jQuery val, retourner un tableau d'options sélectionnées et créer un sélecteur basé sur les valeurs sélectionnées.

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

http://jsfiddle.net/3AbJq/

5
undefined

S'il s'agit d'une sélection multiple, n'utilisez pas 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();
    }
});

Démo: Fiddle

Vous pouvez le simplifier comme ci-dessous, si vous pouvez apporter quelques modifications au balisage.

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

Démo: Fiddle

1
Arun P Johny

Il n'y a pas d'instruction JQuery Switch . Si vous voulez utiliser l'instruction switch, vous pouvez vous référer à Javascript Switch.

Switch

Voici mon approche. Je vais ajouter un attribut data-section pour chaque option dans # select-choice-1, qui aura l'identifiant du div correspondant.

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