Question

使用jQuery，我想根据用户的选择显示不同的文本集。由于我是jQuery的新手，我想看看是否有更简洁的方法来写出来？我当前的代码运行正常，但是我会喜欢其他功能的任何输入，这些功能可以在我进一步移动之前更快地完成。谢谢！

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

    })  

});

Answer 1

这个怎么样：

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

Answer 2

我建议的一个调整就是从一开始就获得价值：

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

然后检查$ val的值而不是$（this）。这样你的代码就不必继续解析$（this）。

您还可以建立对其他div的引用：

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

因为每次使用$（selector），都会创建一个必须解析的新jQuery对象。

你可以在你的函数之外创建$ groupA和$ groupB，所以它们只能在页面生命周期内定义一次。

Answer 3

尽可能使用class而不是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();
    })  
});

Answer 4

如果我心情不好，我可能会做一些事情：

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

})

但我认为这不是什么大问题。

Answer 5

如果要显示或隐藏的元素都在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();
    }
});

Answer 6

尝试 -

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

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

Answer 7

$('.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。

我使用event参数和目标而不是this，如果要重用它们，它会使这些处理程序更容易编写为匿名函数：

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

Answer 8

您可以将值更改为div id - 将所有div保存在一个容器中，并在每次更改时使用循环（每个）检查它们并检查val == id是否显示else hide。

Answer 9

我要做的是将所有group_CHAR元素包装在主div中，添加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/，因此您可以看到它的实际效果。

如何使用jQuery基于选择显示/隐藏div？

9 个答案: