Question

我有一个标识为#txtUserEntry的文本框，用户可以将他们的家庭成员的数量放在他们的房子里，并在他们将一个数字放入文本框中后点击#btnAddOccupant按钮{{1}应该显示取决于输入的数字，这意味着1个家庭成员等于1 #divOccupantProfile

aspx代码

#divOccupantProfile

divOccupantProfile

<tr>
    <td style="text-align:left"><asp:Label ID="lbUserEntry" runat="server" Text="Number of House occupant"></asp:Label></td>
    <td><asp:TextBox ID="txtUserEntry" class="basetxt" runat="server" Width="290"></asp:TextBox></td>
</tr>
<tr>
    <td style="text-align:left"><asp:Button ID="btnAddOccupant" runat="server" Text="+" />
    <asp:Label ID="lbres5" runat="server" Text="Add Occupant"></asp:Label></td>
 </tr>

有人可以告诉我一个如何做到这一点的例子

Answer 1

类似

$('#btnAddOccupant').click(function(){
        var occupants = $('#txtUserEntry').val();
        //here some check on occupants.....

        for(int i = 0;i<occupants;i++){
            $(somewhere).append($('#divOccupantProfile').html());
        }
    })

一些建议：因为你打算使用多个divOccupantProfile，所以最好使用基于类而不是ID的选择器，否则在你的页面中你将拥有1个具有相同ID的元素。

$（某处）是“容器”，您希望将所有div与每个占用者配置文件相关联

另请注意，.html（）函数将复制html INSIDE div，排除div本身。所以如果你想以这种方式形成N个元素

<div class="occupantProfile">...</div>
<div class="occupantProfile">...</div>

你必须使用

somewhere.append($('<div').append($('.occupantProfile')).html())

Answer 2

在这里，我为你应该找到的帮助做了一个样本

<强> HTML

<input type="text"http://jsfiddle.net/#save id="txtnum" />
<input type="button" value="click" id="btnSubmit" />
<div id="divOccupantProfile1">Data 1</div>
<div id="divOccupantProfile2">Data 2</div>
<div id="divOccupantProfile3">Data 3</div>
<div id="divOccupantProfile4">Data 4</div>
<div id="divOccupantProfile5">Data 5</div>

<强> CSS

div[id^="divOccupantProfile"] {
    display:none;
}

<强> Jquery的

$("#btnSubmit").click(function(){
var num = $("#txtnum").val();
    $("#divOccupantProfile"+ num).css("display","block");
})

Demo Link

用户在文本框中输入数字时动态显示div

2 个答案: