Javascript 如何使用jQuery根据选择显示/隐藏div？

使用jQuery，我希望根据用户的选择显示一组不同的文本。由于我是jQuery新手，我想看看是否有一种更简洁的方法来写出来？我当前的代码运行良好，但在我进一步研究之前，我希望其他函数能够更快地完成这项工作。谢谢

HTML:

---

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

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

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

您还可以建立对其他部门的参考：

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

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

您可以在函数之外创建$groupA和$groupB，这样在页面的整个生命周期中它们只定义一次。

这样如何：

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

---

尽可能使用类而不是ID，它们更灵活。在您的情况下，使用多个类将导致：

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

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

---

如果我心情简单，我可能会做如下事情：

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

})

---

但是我认为这没什么大不了的。

如果要显示或隐藏的元素都在DOM的同一级别，您可以使用

.sides（）

查找所有不感兴趣的元素

另外，使用

类

将所有操作限制为应该切换的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();
    }
});

试试-

演示-

您可以使用选择器来发挥自己的优势，如果

$（'#group.'+$（this）.val（））

不是

a

或

b

，则选择器将为空，并且不会显示任何内容。
如果是

a

，则选择并显示

#组a

。
如果是

b

，则选择并显示

#组b

我将使用事件参数和目标，而不是

this

，如果要重用这些处理程序，则可以更轻松地将其作为匿名函数编写：

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

---

您可以将值更改为div id-将所有div保存在一个容器中，每次更改时都使用一个循环（每个）对其进行检查，并检查val==id show else hide。

我要做的是将所有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();           
    }
});

---

我已经创建了，所以您可以看到它的实际运行。

这很好。添加

else if

，而不仅仅是

if

，以避免检查每个案例。保存对$（'#group_a'）和$（'#group_b'）的引用，以获得性能上的微小改进。我将修改您的解决方案（这是一个很好的解决方案），以同时使用ID和类。如果您只想选择一个特定的元素，那么应该使用一个ID来标识它。所以hidable类是好的，但是group_a和group_b应该保留为ID。@solendil使用类的问题是，它们的查找速度比IDs（）慢，他说他想要运行更快的东西。我想说两件事：1）不要优化2）不要优化（现在）。所以你是对的，ID比类快，但如果这真的是个问题，jQuery的使用也可能比原生JS慢……我同意你的看法。我只是假设他想要优化它，因为他说他想要的东西“…可以更快地完成”

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

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

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

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

var g = $('#groups');

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

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

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