Question

我有一个带有选择菜单的表单，其值为1,2,3,4。当选择3时，3个子div是可见的，但是1选择只有1是可见的。

我创建了一个简单的span div，它包含每个用户的输入字段

<span id="ticketuser1">....</span><span id="ticketuser2">....etc

$('#numOfTickets').change(function() {
                var num= $("#numOfTickets").val();

                for (var i=0;i<num;i++){ 
                    if(i>num){
                        $('#ticketuser'+i).hide();
                    } else {
                        $('#ticketuser'+i).show();
                    }
                }

        });

现在从2到3到4按预期进行，但选择较低的数字并不起作用。

任何提示？

Answer 1

问题是你的循环永远不会进入隐藏条件，因为隐藏条件也是结束条件。

$('#numOfTickets').change(function() {
        var num= $("#numOfTickets").val();

        for (var i=0;i<num;i++){ 
            if(i>num){
                $('#ticketuser'+i).hide();
            } else {
                $('#ticketuser'+i).show();
            }
        }

});

您需要有两个循环和一个可以是静态或动态的变量。

在我的简单例子中，我选择将其设为静态：

var maxUser = 5;

$(function () {
    $('#numOfTickets').change(function () {
        var num = parseInt($(this).val())+1;
        for (var i = 1; i < num; i++) {
            $('#ticketUser' + i).show();            
        }    
        for (var j = num ; j <= maxUser; j++){
            $('#ticketUser' + j).hide();            
        }                                
    });
});

因此，如果div小于maxUser但大于num，则会显示。

在第二个循环中，我们隐藏了num上的所有内容。

num是你的值+1，这样你的循环就会抓住你打算显示的最后一个项目。

Here is a working fiddle 如果您希望变量是动态的，并且基于页面加载时可用的选项then here is another example。您可以轻松地在第二个示例中添加初始化maxUser变量的加载代码，如果选项是动态的，则将其放在更改函数中。

如何显示隐藏动态解析div？

1 个答案: