logo标签列表

如何在jQuery中使用switch case语句？

jqueryif-statementswitch-statement
14
我有一个 if-else 语句，但是它的响应很奇怪... 每当我首先选择 "输出" 时，之后选择的任何内容都无法出现... FYI，我正在使用多选以便可以选择并显示尽可能多的内容。
 $('#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();

        }

我的if-else语句有错误吗？还是我必须在这里使用switch case语句？如果是，应该如何操作？

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>
以上的if..else if..else有什么问题？ - Surendra Jnawali
@SJnawali 这是一个多选框，如果我先选择了“output”，那么之后选择的其他选项将不会出现。 - yvonnezoe
4个回答
36

这只是标准的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
}

开关变量将是所选标签的名称。

谢谢...我应该如何在jQuery选择语句中表示“1”？ - yvonnezoe
可以通过省略 break;(s) 来添加多个 case 选项。 - QMaster
6
您在这种情况下不需要使用switch语句，您可以使用所选选项的当前值或id来选择目标元素：
$('#select-choice-1').change(function(){
    $('.elements').hide();
    $('#' + this.value + 'Text').show();
});

更新： 由于您的 select 元素使用了 multiple 属性，您可以使用 jQuery 的 val 方法来获取选中的选项数组，然后可以基于选中的值创建一个选择器。

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

http://jsfiddle.net/3AbJq/

@ArunPJohny 是的，但更改ID并不是很困难。 - Ram
抱歉，我刚刚详细阐述了我的问题（我正在使用多选）。您的代码可以工作，但是当我取消选择并选择另一个选项时，它不会隐藏或更改为另一个选项。 - yvonnezoe
它现在可以工作了（虽然对我来说似乎相当复杂）：D耶！谢谢！但是“div.right > div”是什么意思？ - yvonnezoe
1
@yvonnezoe 不客气，那是一个直接子选择器，选择具有 right 类的 div 元素的直接子级 div 元素。 - Ram
1
@yvonnezoe 是的，你指的是 JavaScript 而不是 Java :), 当然，如果数组的长度大于1，则 join 将连接数组的元素，因此如果用户选择了1个选项，则该选项将与 'Text' 连接，否则它会使用 'Text, #' 连接它们，然后将其与 'Text' 连接，您可以编写 console.log(selector)，它会显示给您 selector 是如何创建的。 - Ram
显示剩余4条评论
1

没有JQuery Switch语句。如果您想使用switch语句，可以参考Javascript Switch。

Switch

这里是我的做法。我会为#select-choice-1中的每个选项添加一个data-section属性，该属性将具有相应div的id。

$('#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();
  
    }
哦，谢谢！也许你可以帮我解决这个问题：http://stackoverflow.com/questions/16099958/jquery-javascript-how-to-display-the-value-get-from-val/16100003?noredirect=1#comment22989483_16100003 https://dev59.com/ynHYa4cB1Zd3GeqPJDou - yvonnezoe
1
如果是多选项，不要使用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();
    }
});

演示：Fiddle

如果您可以对标记进行一些更改，您可以将其简化为以下内容

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

演示：Fiddle

啊，是的，那是我程序的一部分，我在上面的问题中没有包含它。但问题是如果首先选择“output”，其他选项就不会出现。:( - yvonnezoe
@yvonnezoe，你能分享一下HTML吗？ - Arun P Johny
@yvonnezoe 你也可以尝试一下undefined的回答。 - Arun P Johny
好的。我尝试了undefined的答案，但对我的情况不起作用。 - yvonnezoe
@yvonnezoe 请分享HTML代码 - Arun P Johny
我刚刚发布了HTML :) 不，undefined的答案对我没有用，因为我正在使用多选。 - yvonnezoe
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接