如何使用jQuery根據選擇顯示/隱藏div？

使用jQuery，我想根據用戶的選擇顯示一組不同的文本。由於我是jQuery的新手，我想看看是否有更清晰的方式來寫出這些？我目前的代碼運行良好，但是會喜歡其他功能上的任何輸入，在我進一步移動之前可以更快地完成此功能。謝謝！如何使用jQuery根據選擇顯示/隱藏div？

HTML：

<div> 
    <label>Select:</label> 
    <select class="toggle_div" /> 
     <option value="">Select</option> 
     <option value="a">A</option> 
     <option value="b">B</option> 
    </select> 
</div> 

<div id="group_a"> 
    Text A 
</div> 

<div id="group_b"> 
    Text B 
</div>

的jQuery：

$(document).ready(function() { 

    $('#group_a').hide(); 
    $('#group_b').hide(); 

    $('.toggle_div').on('change',function(){ 

     if($(this).val() == "a"){ 
      $('#group_a').show(); 
      $('#group_b').hide(); 
     } 

     if($(this).val() == "b"){ 
      $('#group_a').hide; 
      $('#group_b').show(); 
     } 

     if($(this).val() == ""){ 
      $('#group_a').hide(); 
      $('#group_b').hide(); 
     }  

    }) 

});

來源

2011-11-22 Michael

這很好。添加'else if'而不是'if'來避免檢查每個案例。保存$（'＃group_a'）和$（'＃group_b'）的引用，以提高性能。 –

如何：

$('#group_a').toggle($(this).val() == 'a'); 
$('#group_b').toggle($(this).val() == 'b');

來源

2011-11-22 13:19:18

一個好辦法，我建議正從一開始的價值：

$val = jQuery(this).val();

再檢查$ val的值而不是$（this）。所以你的代碼不需要繼續解析$（this）。

你也可以建立引用到其他的div：

$groupA = jQuery('#group_a'); 
$groupB = jQuery('#group_b');

因爲每次你使用$（選擇），您可以創建一個必須解決的一個新的jQuery對象。

你可以在你的函數之外創建$ groupA和$ groupB，所以它們只能在頁面的整個生命週期中定義一次。

來源

2011-11-22 13:18:28 dnuttle

使用類，而不是隻要有可能，他們更靈活的ID。在你的情況下，使用多個類會導致：

<div class="group_a hidable"> 
    Text A 
</div> 

<div class="group_b hidable"> 
    Text B 
</div>

然後

$(document).ready(function() { 
    $('.hidable').hide(); 
    $('.toggle_div').on('change',function(){ 
     $('.hidable').hide(); 
     $('.group_'+$(this).val()).show(); 
    }) 
});

來源

2011-11-22 13:19:23 solendil

我會修改你的解決方案（這是一個很好的解決方案）以使用ID和一個類。如果你只想選擇一個特定的元素，那麼應該使用一個ID來標識它。所以這個隱藏類很好，但是group_a和group_b應該保持爲ID。 – dnuttle

@solendil使用類的問題是，他們查找比IDS慢（[鏈接]（http://encosia.com/11-keystrokes-that-made-my-jquery-selector-run-10x-faster /）），他說他想要更快運行的東西。 – JesseBuesking

我會說兩件事：1）不優化2）不優化（還）。所以你是對的，id比類更快，但如果真的有問題，jQuery的使用也可能比原生JS慢...... – solendil

如果我是在一個簡潔的心情，我可能會做這樣的事情：

$('.toggle_div').on('change',function(){ 
    $('#group_a').hide(); 
    $('#group_b').hide(); 

    if($(this).val() == "a") 
     $('#group_a').show(); 

    if($(this).val() == "b") 
     $('#group_b').show(); 

})

但我不不要認爲這是一件大事。

來源

2011-11-22 13:19:39 Oliver

罰款爲簡單的隱藏/顯示 - 如果動畫添加討厭。 – Alnitak

如果要顯示或隱藏的元素全部位於DOM的同一級別，則可以使用.siblings()來查找所有感興趣的元素，即不是。

另外，使用class將所有操作限制爲應該切換的div。

$('.toggle_div').on('change',function() { 

    var which = $(this).val(); 
    var cls = '.myclass'; 

    if (which) { 
     var sel = '#group_' + which; 
     $(sel).show().siblings(cls).hide(); 
    } else { 
     $(cls).hide(); 
    } 
});

來源

2011-11-22 13:19:43 Alnitak

嘗試 -

$('.toggle_div').on('change', function() { 
    $('div[id^="group"]').hide(); 
    $('#group_' + $(this).val()).show(); 
}).change();

演示 - http://jsfiddle.net/R5KSq/

來源

2011-11-22 13:22:43 ipr101

$('.toggle_div').on('change',function(){ 
    $('#group_a,#group_a').hide(); 
    $('#group_' + $(this).val()).show(); 
})

您可以使用選擇，你的優勢$('#group_' + $(this).val())將是空的，如果$(this).val()不是a或b，則選擇將空了，什麼都不會顯示。
如果是a，則選擇並顯示#group_a。
如果它是b，則選擇並顯示#group_b。

我會用事件參數和目標，而不是this，它使得編寫這些處理器爲匿名函數更容易，如果他們被重用：

$('.toggle_div').on('change',function(event){ 
    $('#group_a,#group_a').hide(); 
    $('#group_' + $(event.target).val()).show(); 
})

來源

2011-11-22 13:25:27 StuperUser

您可以將值更改爲DIV ID - 將所有的div放在一個容器中，每次更改時都要用一個循環（每個）檢查它們，並檢查val == id show是否隱藏。

來源

2011-11-22 13:26:42

我會怎麼做，是包裹在主DIV所有group_CHAR元素，添加CSS最初隱藏所有group_CHAR元素（快得多），並使用此JS：

var g = $('#groups'); 

$('.toggle_div').on('change',function(){ 

    $('div', g).hide(); 

    var t = $(this).val();  
    if (t !== '') {  
     $('#group_' + t, g).show();   
    } 
});

我創建http://jsfiddle.net/kDGNG/所以你可以看到它的行動。

來源

2011-11-22 13:30:55 JesseBuesking

如何使用jQuery根據選擇顯示/隱藏div？

回答

相關問題