我如何为 jQuery 做一个 switch case？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16139948/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do I do a switch case for jQuery?
提问by yvonnezoe
I have this if-else statement which gave me weird response... whenever i select "output" first, nothing else selected afterwards can appear... FYI, I am using multi select so I can select and show as many as I want.
我有这个 if-else 语句，它给了我奇怪的反应......每当我首先选择“输出”时，之后选择的任何东西都不会出现......仅供参考，我正在使用多选，所以我可以选择并显示我想要的数量.
$('#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();
}
Is there a mistake in my if-else statement? or must I use Switch case statement here? If so, how should i do it?
我的 if-else 语句有错误吗？或者我必须在这里使用 Switch case 语句？如果是这样，我应该怎么做？
HTML:
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>
回答by Martin V.
That`s just standard javascript : http://www.w3schools.com/js/js_switch.asp
这只是标准的 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
}
where switch variable will be the name of selected tag
其中 switch 变量将是所选标签的名称
回答by undefined
You don't need a switch statement in this case, you can use the current value or id of the selected option for selecting the target element:
在这种情况下，您不需要 switch 语句，您可以使用所选选项的当前值或 id 来选择目标元素：
$('#select-choice-1').change(function(){
$('.elements').hide();
$('#' + this.value + 'Text').show();
});
Update:As you are using multiple attribute for the select element, you can use jQuery valmethod, it returns an array of selected options, then you can create a selector based on the selected values.
更新：当您为 select 元素使用多个属性时，您可以使用 jQueryval方法，它返回一个选定选项的数组，然后您可以根据选定的值创建一个选择器。
$('#select-choice-1').change(function(){
$('div.right > div').hide();
var selector = '#' + $(this).val().join('Text, #') + 'Text';
$(selector).show();
});
回答by Arun P Johny
If it is a multi select, don't use else if
如果是多选，不要使用 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();
}
});
Demo: Fiddle
演示：小提琴
You can simplify it to something like below, if you can make some changes to the markup
如果您可以对标记进行一些更改，则可以将其简化为如下所示
$(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
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>
Demo: Fiddle
演示：小提琴
回答by PSL
There is no JQuery Switchstatement. If you want to use switch statement you can refer to Javascript Switch.
没有JQuery Switch语句。如果你想使用 switch 语句，你可以参考 Javascript Switch。
Here would be my approach. i will add a data-section attribute for each option in #select-choice-1, which will have the id of the corresponding div.
这将是我的方法。我将为#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();
?
? ? }
