2

我有一个小组合框，允许用户选择他们想要注册活动的家庭成员数量。但如果家庭成员不是美国公民，我想展示第二组选项让他们进入。我可以动态添加元素，但我不知道如何显示/隐藏公民字段。

我是 jQuery 新手，所以我可能以错误的方式执行此操作，但这是添加字段的函数：

function familySize() {
        while (famElements < $("#famNum").val()) { // add fields
                    addFields = '<div class="member"> Name:&nbsp;<input id="name" type="text" placeholder="Name" required> &nbsp;&nbsp;<input id="cit" type="checkbox" onChange="citizenInfo()" >&nbsp;&nbsp;Non U.S. Citizen?<br/></div> <div class="citInfo" style="display:none"> <input id="countryCitizenship" type="text" placeholder="Citizenship" required> </div>';
                    document.getElementById('famItems').innerHTML += addFields;
                    famElements++;
                }
        while (famElements > $("#famNum").val()) { // remove fields
            console.log("remove one");
             $('#famItems div:last').remove();
             famElements--;
        }
    }

<div id="famItems">
            </div>

citInfo div 上的 style="display:none" 最初确实隐藏了它，但我只需要弄清楚如何捕获复选框上的点击以隐藏/显示公民文本输入。

4

3 回答 3

3

使用 jQuery 的live函数来处理动态创建的项目的事件。

$(function(){
    $('#cit').live('change', citizenInfo());
});
于 2011-05-31T20:04:54.073 回答
1

如果您使用的是 jQuery，只需使用选择器而不是getElementById()并使用append()来向其中添加内容。

此外，您永远不应该有两个具有相同 ID 的项目。您可以通过将famElements计数器附加到输入字段的 ID 来对其进行排序。由于此更改排除了按 ID 选择元素的可能性，我还将您的复选框更改为具有 class cit，因此我可以使用简单的选择器附加事件。

对于点击事件，可以使用.live()or.delegate()这样就不必一直保持绑定事件。

function familySize() {
    while (famElements < $("#famNum").val()) { // add fields
        famElements++;
        addFields = '<div class="member"> Name:&nbsp;<input id="name'+famElements+'" type="text" placeholder="Name" required> &nbsp;&nbsp;<input class="cit" id="cit'+famElements+'" type="checkbox" onChange="citizenInfo()" >&nbsp;&nbsp;Non U.S. Citizen?<br/></div> <div class="citInfo" style="display:none"> <input id="countryCitizenship'+famElements+'" type="text" placeholder="Citizenship" required></div>';
        $('#famItems').append(addFields);
    }
    while (famElements > $("#famNum").val()) { // remove fields
        console.log("remove one");
        $('#famItems div:last').remove();
        famElements--;
    }
}

// Your jQuery ready function
$(function(){
    // Click event on checkboxes
    $('#famItems').delegate('.cit','click',function(){
        var $this = $(this);

            // Show or hide the div
        if($this.is(':checked')){
            $this.parent().find('.citInfo').hide();
        } else {
            $this.parent().find('.citInfo').show();
        }
    });
});

您可以使用 jQuery 更优雅地构建您的元素，但它会做它需要做的事情。尽管您可能会考虑这样做，以防您添加到您的 HTML 中并且那一大块文本变得太神秘了。

于 2011-05-31T20:17:55.800 回答
-1

我终于通过纯粹的反复试验弄明白了。如果我将“member” div 和“citInfo” div 都包含在另一个 div 中，然后将复选框定义更改为：

<input class="cit" onChange="citizenInfo(this)" type="checkbox">

那么我只需要这个功能：

function citizenInfo(chkBox) {
 $(chkBox).parent().parent().find('.citInfo').toggle();
}
于 2011-06-08T20:36:04.727 回答