0

我有这个 HTML：

{% for entity in items %}
    <input type="checkbox" name="{{ entity.getLabel|lower }}" id="{{ entity.getLabel|lower ~ "_choice" }}" value="{{ entity.getId }}" /> {{ entity.getLabel }}
{% endfor %}

{% for entity in items %}
    <div id="{{ entity.getLabel|lower ~ "_choice_" ~ entity.getId }}" style="display: none">
        <button type="button" class="{{ entity.getLabel|lower }}">Adicionar {{ entity.getLabel|lower }}</button>
    </div>
{% endfor %}

<button type="button" class="create-variation" id="create-variation" style="display: none">{{'Crear variaciones'|trans}}</button>

<section id="variations_holder" style="display: none"></section>

这就是它渲染时的样子：

    <div style="" id="talla_choice_24">
        <span>Talla<input placeholder="Talla" value="" data-id="talla_24" name="input_talla[]"></span>
        <br>
        <button class="talla" type="button">Adicionar talla</button>
    </div>
    <div style="" id="color_choice_25">
        <span>Color<input placeholder="Color" value="" data-id="color_25" name="input_color[]"></span>
        <br>
        <button class="color" type="button">Adicionar color</button>
    </div>

我第一次创建如下输入：

$('#choices').on("change", ":checkbox", function(e) {
    var theName = $(this).attr('name');
    var theID = $(this).attr('value');
    var hasChecked = $(this).is('checked').length;
    var input = "";

    input = '<span>' + capitalize(theName) + '<input name="input_' + theName + '[]" data-id="' + theName + '_' + theID + '" value="" placeholder="' + capitalize(theName) + '" /></span><br/>';

    if ($(this).is(":checked")) {
        $("#" + theName + '_choice_' + theID).find(':button').before(input);
        $("#" + theName + '_choice_' + theID).show();
    } else {
        $("#" + theName + '_choice_' + theID).find(':not(button)').remove();
        $("#" + theName + '_choice_' + theID).hide();
    }
});

这段代码工作正常，我现在需要的是根据我点击的按钮克隆每个输入元素。例如，少说我点击按钮“button#talla”然后我应该克隆元素：

<span>Talla<input placeholder="Talla" value="" data-id="talla_24" name="input_talla[]"></span><br>

另一方面，如果我单击“button#color”，那么我应该克隆的是：

<span>Color<input placeholder="Color" value="" data-id="color_25" name="input_color[]"></span><br>

当然，代码应该使用第一个模板方法而不是生成的代码，因为它是动态的。我正在做这个：

$("#choices").on("click", ":button", function(e) {
    var class_name = $(this).attr('class');
    var theID = $(this).attr('value');
    $("#" + class_name + "_choice span:last").clone().attr("id", theID).before("button." + class_name);
});

但不起作用，因为它不克隆并且不做任何事情，任何人都可以帮我解决这个问题吗？

PS：有一些 Twig 标签和值，但忘记了它们，因为它们正确设置了值

4

1 回答 1

1

我需要得到的是父 DIV 的类，以便克隆其上的最新输入

不，实际上你甚至不需要这个。您只需要访问父 div，而不管其类如何 -在单击的按钮上使用parenttraversal 方法：

$("#choices").on("click", ":button", function(e) {
    $(this).parent().find("span:last").clone().insertBefore(this);
});

顺便说一句，按钮没有价值，跨度或输入没有 id，所以我不确定你试图用theID.

于 2013-09-12T13:36:01.577 回答