Question

我有这个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();
    }
});

这段代码正常，我现在需要的是根据我点击的按钮克隆每个输入元素。例如，少说我点击按钮＆＃34;按钮＃talla＆＃34;然后我应该克隆元素：

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

另一方面，如果我点击＆＃34;按钮#color＆＃34;然后我应该克隆的是：

<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标签和值，但忘了它们，因为它们正确设置了值

Answer 1

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

不，实际上你根本不需要这个。您只需访问父div，无论其类如何 - 使用单击按钮上的parent traversal method：

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

顺便说一句，该按钮没有任何值，而且跨度或输入没有ID，所以我不确定您尝试用theID做什么。

克隆INPUT元素就在他正确的DIV内部之后

1 个答案: