0

我有一个带有值 1、2、3、4 的选择菜单的表单。When 3 is selected 3 sub div's are visible, but with 1 select just 1 is visible.

我创建了一些简单的 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 符合预期，但选择较低的数字并不能解决问题。

有小费吗？

4

1 回答 1

2

问题是您的循环永远不会到达隐藏条件，因为隐藏条件也是结束条件。

$('#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，以便您的循环将抓取您打算显示的最后一个项目。

这是一个有效的小提琴 如果您希望变量是动态的并且基于页面加载时可用的选项，那么这里是另一个示例。如果选项是动态的，您可以轻松地从加载中添加代码以初始化maxUser第二个示例中的变量并将其放置在更改函数中。

于 2013-02-21T21:27:47.920 回答