jquery - 根据选择值显示/隐藏 div

Question

我想要一个下拉选择菜单来显示基于值的文本框：

var showDiv = function(goal){  
    var count = 1;  
    $('.myDIV').each(function(){  
    if(count <= goal){  
    $(this).show().nextAll('.group').hide()  
    }  

        count = count +1  
    });  
};  

var goal = $('#mySelect').val();  
showDiv(goal)  

$('#mySelect').change(function(){  

       showDiv($(this).val())   
});  

我正在尝试，但它不起作用，这里是 - http://jsfiddle.net/jdveR/

我想要的是；

如果选择1；显示 1 div 如果选择 2；显示 1 和 2 div 如果选择 3；显示 1、2 和 3 div 就是这样。

非常感谢任何帮助。谢谢

Answer 1

您可以使用:lt()选择器。您首先不需要遍历元素。

这将divs根据 div 的索引进行选择。

var showDiv = function (goal) {
    $('.myDIV').hide();
    $('.myDIV:lt(' + goal + ')').show();
};

$('#mySelect').change(function () {
    showDiv($(this).val())
}).change();

检查小提琴

Answer 2

像这样的东西：http: //jsfiddle.net/jdveR/10/

var showDiv = function(goal){
    $('.myDIV').hide();
    var count = 1;  
    $('.myDIV').each(function(){  
        if(count <= goal){  
            $(this).show().nextAll('.group').hide()  
        }
       count = count +1; 
});  
};  

var goal = $('#mySelect').val();  
showDiv(goal);

$('#mySelect').on('change', function(){ 
       showDiv($(this).val());
});  

Answer 3

如果您想将数据与设计分开，那么您可以尝试添加data-goal="x"到您的 div 并将您的 javascript 更改为：

HTML：

<div class="myDIV" id="div1" data-goal="1">Div1</div>  
<div class="myDIV" id="div2" data-goal="2">Div2</div>  
<div class="myDIV" id="div3" data-goal="3">Div3</div>  
<div class="myDIV" id="div4" data-goal="4">Div4</div>  
<div class="myDIV" id="div5" data-goal="5">Div5</div>

Javascript

var showDiv = function(goal){  
    $('.myDIV').hide().each(function(){
      if( $(this).attr('data-goal') <= goal )
         $(this).show();
    });
};  

var goal = $('#mySelect').val();  
showDiv(goal)  

$('#mySelect').change(function(){  
       showDiv($(this).val())   
});