jQuery - 有没有更有效的方法来做到这一点？答案

【问题标题】：jQuery - Is there a more efficient way to do this?jQuery - 有没有更有效的方法来做到这一点？
【发布时间】：2011-09-29 23:49:03
【问题描述】：

http://jsfiddle.net/bGDME/

基本上，我只想显示范围内选择的任何内容并隐藏其余内容。

我这样做的方式似乎如此..我不知道。乏味。

我希望能得到一些改进它的想法。也非常感谢您指出正确的方向。

谢谢。

【问题讨论】：

为什么不添加一个类来隐藏超出您范围的元素？

标签： javascript jquery html

【解决方案1】：

您可以使用 toggle() 代替 if/else 语句来最小化代码

工作示例： http://jsfiddle.net/hunter/bGDME/1/

$('#scope').change( function(){
    var type = $('option:selected', this).val();
    $('#grade').toggle(type == 2 || type == 3);
    $('#class').toggle(type == 3);
});

.toggle(showOrHide)

showOrHide：一个布尔值，指示是显示还是隐藏元素。

【讨论】：

不错。简单干净。我喜欢它。

【解决方案2】：

这对我来说似乎很好，除非您有很多或动态控件。但是你可以使用 JQuery addClass / removeClass, switch 语句，多个 Selector $('#grade, #class').show(); 来最小化代码

【讨论】：

【解决方案3】：

你也可以使用开关状态：http://jsfiddle.net/bGDME/3/

【讨论】：

【解决方案4】：

这是一种使用 HTML5 数据属性在选择框上以声明方式设置“范围级别”的方法：http://jsfiddle.net/bGDME/6/

还有更新的 JavaScript：

var $scopedSelects = $('#grade, #class').hide();
$('#scope').change( function(){
    var scopeLevel = $(this).val();
    $scopedSelects.each(function() {
        var $this = $(this);
        $this[$this.data('scope-level') <= scopeLevel ? 'show' : 'hide']();
    });
});

这可能具有的主要优势是，无论您有多少“范围选择”，代码都保持不变（当然，假设您更新了初始选择器）。

【讨论】：

【解决方案5】：

这个呢？？

  $(document).ready( function() {    
    $('#grade, #class').hide();    
    $('#scope').change( function(){    
        var type = $('option:selected', this).text();
        alert(type);      
        $('select').next().not('#'+type).hide();
        $('#'+type).show();       
    });
});

DEMO

【讨论】：

【解决方案6】：

很简单，

$(document).ready( function() {
    $("select[id!='scope'][id!='school']").hide();
    $('#scope').change( function(){
        $("select[id!='scope']").hide();
        var ken=$(this).val();
        $("#"+ken).show();
    });
});

【讨论】：

【解决方案7】：

如果您想在添加更多选择元素时通过不触摸 javascript 使其更具动态性，那么您可以对您的 javascript 代码和 HTML 做一些小的更改，您只需要编辑 HTML

Javascript：

$(document).ready(function() {
$('#scope').change(function() {
    var type = $(this).val().split(',');
    $('.values select').hide();
    for (x in type) {
        $('.values').find('#'+type[x]).show();
    }

});

});

HTML：

<select id='scope'>
<option value=''>Select</option>
<option value='school'>school</option>
<option value='school,grade'>grade</option>
<option value='school,grade,class'>class</option></select>

【讨论】：

【解决方案8】：

这将满足您的需求：http://jsfiddle.net/bGDME/30/

您只需在eq() 方法中使用scope 的val() 即可确定应保持显示哪个兄弟select。如果从第一个下拉列表中选择了“学校”，则两者都不会显示：

$(document).ready( function() {

    var additionalSelects = $('#grade, #class');

    $('#scope').change(function(){
        var selectedVal = $(this).val();
        additionalSelects.hide();
        if(selectedVal > 1){
            additionalSelects.eq(selectedVal - 2).show();
        }
    });
});

【讨论】：

不是真的，因为我不想在选择 grade 时隐藏 school 选择框。等等等等。