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 に答える