如何限制 JQuery 克隆 Div 的数量？

发布于 2024-12-13 08:04:17 字数 1026 浏览 1 评论 0原文

我是 JQuery 新手，在使用 Clone() 函数时遇到一些问题。

我的问题是如何限制可以克隆答案的次数？我会声明一个变量并通过循环运行它直到达到所需的数字吗？

这是 .aspx

> <div id="answer_wrapper">
>     <div id="answer">
>         <h3 class="new">Answer 1</h3>
>         <asp:TextBox ID="QuestionAnswer1" runat="server" CssClass="form" Width="300px"></asp:TextBox>
>     </div>
>     <h3 class="new">Answer 2</h3>
>     <asp:TextBox ID="QuestionAnswer2" runat="server" CssClass="form" Width="300px"></asp:TextBox>
> </div> <!-- end answer_wrapper -->
> <br />
> <asp:Button ID="ga" runat="server" CssClass="button_add_question" style="border: 0px;" />
> <a id="foo" href="#">Duplicate</a>

> <script type="text/javascript">
>     $('#foo').click(function () {
>     $('#answer').clone().appendTo('#answer_wrapper');
>     });
> </script>

任何帮助将不胜感激，因为我真的不知道如何解决这个问题。

原文

I'm new to JQuery and I'm having some trouble with the Clone() function.

My question is how can I limit the number of times the answers can be cloned?
Would I declare a variable and run it through a loop until the desired number is reached?

Here is the .aspx

> <div id="answer_wrapper">
>     <div id="answer">
>         <h3 class="new">Answer 1</h3>
>         <asp:TextBox ID="QuestionAnswer1" runat="server" CssClass="form" Width="300px"></asp:TextBox>
>     </div>
>     <h3 class="new">Answer 2</h3>
>     <asp:TextBox ID="QuestionAnswer2" runat="server" CssClass="form" Width="300px"></asp:TextBox>
> </div> <!-- end answer_wrapper -->
> <br />
> <asp:Button ID="ga" runat="server" CssClass="button_add_question" style="border: 0px;" />
> <a id="foo" href="#">Duplicate</a>

> <script type="text/javascript">
>     $('#foo').click(function () {
>     $('#answer').clone().appendTo('#answer_wrapper');
>     });
> </script>

Any help would be much appreciated as I don't really know how to approach this.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

秉烛思 2024-12-20 08:04:17

看起来您的代码将导致创建具有相同 ID 的多个元素，这并不理想，但要回答您的问题，也许可以这样做：

<script type="text/javascript">
     var limit = 10;
     $('#foo').click(function () {
         if($('#answer').length < limit) {
             $('#answer').clone().appendTo('#answer_wrapper');
         }
     });
</script>

It looks like your code is going to cause multiple elements with the same ID to be created, which isn't ideal, but to answer your question, maybe do this:

<script type="text/javascript">
     var limit = 10;
     $('#foo').click(function () {
         if($('#answer').length < limit) {
             $('#answer').clone().appendTo('#answer_wrapper');
         }
     });
</script>

回复收藏 0 原文

青巷忧颜 2024-12-20 08:04:17

您可以通过在点击事件外部设置 var 并增加其值来限制克隆的 div 数量，也可以计算 div 数量。

我希望您也想更改或删除该 ID。

<script type="text/javascript">
    var count = 1;
    $('#foo').click(function () {
        if(count < 5) {
            $('#answer').clone().attr({ 'id': 'answer' + count }).appendTo('#answer_wrapper');
            //$('#answer').clone().removeAttr('id').appendTo('#answer_wrapper'); // remove the attribute
            count++;
        }
    });
</script>

计算div：

<script type="text/javascript">
    $('#foo').click(function () {
        if($('.answer').length < 5) { // Hope you add a class to the answer
            $('#answer').clone().addClass('answer').removeAttr('id').appendTo('#answer_wrapper');
        }
    });
</script>

You can either limit the number of divs cloned by setting a var outside click event and increasing its value or you can count the divs number.

I expect you want to change or remove the id too.

<script type="text/javascript">
    var count = 1;
    $('#foo').click(function () {
        if(count < 5) {
            $('#answer').clone().attr({ 'id': 'answer' + count }).appendTo('#answer_wrapper');
            //$('#answer').clone().removeAttr('id').appendTo('#answer_wrapper'); // remove the attribute
            count++;
        }
    });
</script>

counting divs:

<script type="text/javascript">
    $('#foo').click(function () {
        if($('.answer').length < 5) { // Hope you add a class to the answer
            $('#answer').clone().addClass('answer').removeAttr('id').appendTo('#answer_wrapper');
        }
    });
</script>

回复收藏 0 原文

~没有更多了~