jQuery için nasıl geçiş yapabilirim?

Question

Eğer bana "çıktı" yı seçtiğimde garip yanıt veren bu if-else ifadesine sahibim, daha sonra hiçbir şey seçilmediyse, daha sonra hiçbir şey seçilemez ... FYI, çoklu seçim kullanıyorum, böylece çok sayıda seçip gösterebilirim istediğim gibi.

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

     } 

Eğer if-else ifademde bir hata var mı? veya Switch case ifadesini burada kullanmalı mıyım? Eğer öyleyse, nasıl yapmalıyım?

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> 

Answer 1

That`s sadece standart javascript: hayır JQuery geçiş anahtarı değişken seçilen etiketin adı olacaktır 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 
}       

Answer 2

yoktur Beyan. Anahtar deyimini kullanmak isterseniz Javascript Anahtarı'na başvurabilirsiniz. İşte

Switch

benim yaklaşım olur. # seçmeli-1'de her bir seçenek için karşılık gelen div'in kimliğine sahip olacak bir veri bölümü özniteliği ekleyeceğim.

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

Güncelleme: Farklı

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

Answer 3

Bu durumda bir switch deyimi gerekmez, hedef elemanı seçimi için seçilen opsiyonun değeri veya id kullanabilirsiniz select öğesi için çoklu öznitelik kullanıyorsunuz, jQuery val yöntemini kullanabilirsiniz, seçili seçeneklerin bir dizisini döndürür, sonra seçilen değerlere göre bir seçici oluşturabilirsiniz.

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

http://jsfiddle.net/3AbJq/

Answer 4

bir çoklu seçim ise, kullanmayın 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: Uygulamayı Fiddle

Sen, aşağıda gibi bir sunucu kolaylaştırabilirsiniz işaretlemeye bazı değişiklikler yapın

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

Demo: Fiddle