Question

我在标签“#valgmulighed1”中有以下HTML，我想在用户按下按钮时在jquery中克隆。我希望我的jquery附加一个类，以便用户可以删除添加的各个行。我想某种循环是必要的，以便为每个克隆内容提供一个“唯一”类，这样脚本就不会删除所有行。

我的HTML在这里：

<input type="button" id="btnid" value="+" />
<div id="valgmulighed1">
    <label>
        <input type="checkbox" name="check2" id="sv1" />
        <span class="label-text">Rigtigt</span>
    </label>
    <input id="Text3" type="text" class="spmtekst2" placeholder="Tekst valgmulighed" onfocus="this.placeholder=''" onblur="this.placeholder='Tekst valgmulighed'" />
    <div class="slet">
        <span>Slet</span>
    </div>
</div>

我尝试在没有循环的情况下对此进行jquery脚本，首先看看我是否可以正确地获得克隆功能。

$("btnid").click(function () {
    $('#valgmulighed1').clone().attr('id', 'id_' + $('#valgmulighed1').index()).inserAfter('#valgmulighed1');
})

然而它没有，所以我在这一点上需要一些帮助。

Answer 1

你选择器错了。它应该#btnid而不是btnid。而不是生成唯一的id，最好使用类。在这里，我使用valgmulighed类。点击.slet删除最近的.valgmulighed，如下所示。

$("#btnid").click(function () {
    $('.valgmulighed:last').clone().attr('id', 'valgmulighed' + ($('.valgmulighed').length + 1)).insertAfter('.valgmulighed:last');
});

$('body').on('click', '.slet', function () {
    if ($('.slet').length > 1)
        $(this).closest('.valgmulighed').remove();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="button" id="btnid" value="+" />
<div class="valgmulighed" id="valgmulighed1">
    <label>
        <input type="checkbox" name="check2" id="sv1" />
        <span class="label-text">Rigtigt</span>
    </label>
    <input id="Text3" type="text" class="spmtekst2" placeholder="Tekst valgmulighed" onfocus="this.placeholder=''" onblur="this.placeholder='Tekst valgmulighed'" />
    <div class="slet">
        <span>Slet</span>
    </div>
</div>

Answer 2

您的拼写错误inserAfter应为insertAfter且错误的选择器应为$("#btnid")。您应该使用class然后id。在删除行时，您必须使用删除按钮单击事件$(this).parents("valgmulighed:first").remove();

$("#btnid").click(function () {
     $('.valgmulighed:last').clone().insertAfter('.valgmulighed:last');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="button" id="btnid" value="+" />
<div class="valgmulighed">
    <label>
        <input type="checkbox" name="check2" id="sv1" />
        <span class="label-text">Rigtigt</span>
    </label>
    <input id="Text3" type="text" class="spmtekst2" placeholder="Tekst valgmulighed" onfocus="this.placeholder=''" onblur="this.placeholder='Tekst valgmulighed'" />
    <div class="slet">
        <span>Slet</span>
    </div>
</div>

Answer 3

问题出在按钮选择器中在你的jquery按钮选择器$（“ #btnid ”）上添加#。点击（...

这是一个常见的错误，与我发生了很多关系。

Answer 4

$("#btnid").click(function() {
    $('#valgmulighed1').clone().attr('id', 'id_' +  $('div[id*="id_"]').length).insertAfter('#valgmulighed1');
})

您使用过$（'＃valgmulighed1'）。index（），但它不正确。每次调用该代码时，您都会得到相同的结果，因为只有一种元素，因此创建的元素将具有相同的ID。

克隆标签，在jquery中一起输入框

4 个答案: