复制div，改变并输出到视图

Question

我现在有点负担过重。我想复制带有 class .recipe-options-line 的最后一个 div 并将其粘贴到带有 class .recipe-options-line 的最后一个 div 后面。到目前为止有效。

在插入 div 之前，我必须对元素进行一些更改。我该怎么做？

我想删除复制元素中存在的文本区域中的所有条目。
我想用变量 RecipeOptionNumber 的内容替换复制的元素中文本区域 (name="recipeOptions[0][number]") 中的数字。
我想在复制的元素中用变量 RecipeOptionNumber 的内容也是如此。

这可能吗？还是我必须寻找其他解决方案？有人可以帮助我吗？

HTML:

        <div class="col-md-12" id="recipe-options-div">
            <div class="recipe-options-line">
                <div class="col-md-3">
                    <div class="fancy-form">
                        <div contenteditable="true" class="form-control limit-textarea autocomplete-textarea" data-placeholder="Anzahl"></div>
                        <textarea class="hide" name="recipeOptions[0][number]" rows="1"></textarea>
                        <i class="fa fa-dot-circle-o"><!-- icon --></i>
                        <span class="maximum-limit"></span>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="fancy-form">
                        <div contenteditable="true" class="form-control limit-textarea autocomplete-textarea" data-placeholder="Einheit"></div>
                        <textarea class="hide" name="recipeOptions[0][unit]" rows="1"></textarea>
                        <i class="fa fa-dot-circle-o"><!-- icon --></i>
                        <span class="maximum-limit"></span>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="fancy-form">
                        <div contenteditable="true" class="form-control limit-textarea autocomplete-textarea" data-placeholder="Zutatenname"></div>
                        <textarea class="hide" name="recipeOptions[0][name]" rows="1"></textarea>
                        <textarea  data-limit-target="unique-10-1" class="limit-textarea hide recipe-options-textarea" data-maxlength="250"></textarea>
                        <i class="fa fa-comment"><!-- icon --></i>
                        <span id="unique-10-1" class="maximum-limit"></span>
                    </div>
                </div>
            </div>
        </div>

        <div class="text-center mb-15">
            <a class="m-0 btn btn-outline btn-shadow-1 btn-info hvr-underline-from-left btn-sm btn-block" id="addRecipeOption"><i class="glyphicon glyphicon-plus"></i>option</a>
        </div>

JS:

var RecipeOptionNumber = 2;
    $(document).on("click", "#addRecipeOption", function () {
        $(".recipe-options-line:last").clone().insertAfter("div.recipe-options-line:last");
        RecipeOptionNumber ++;
    });

Answer 1

Is that possible? Or do I have to look for another solution? Can someone help me?

是的，当然有可能！这里一个好的解决方案是为食谱选项创建一个空白模板和一个可重用的函数以编程方式添加它们。请参阅下面的示例和注释：

$(function() {
    var recipeOptionsDiv   = $("#recipe-options-div");
    var RecipeOptionNumber = 0;

    // Re-usable function to add recipe options
    function addRecipeOption() {
        // A blank recipe <div>
        var newRecipe = $("#recipe-template-wrapper .recipe-options-line").clone();

        // Iterate through each [data-recipe] element and set its [name] attribute accordingly
        newRecipe.find("[data-recipe]").each(function() {
            var recipeOption = $(this).attr("data-recipe");

            $(this).attr("name", "recipeOptions[" + RecipeOptionNumber + "][" + recipeOption + "]");
        });

        // Set [data-limit-target] to RecipeOptionNumber + 1
        newRecipe.find("[data-limit-target]").attr("data-limit-target", "unique-10-" + (RecipeOptionNumber + 1));

        // Insert the new HTML
        recipeOptionsDiv.append(newRecipe);

        // Increment recipe counter
        RecipeOptionNumber++;
    }

    // Add click event listener for Add Option button
    $("#addRecipeOption").click(addRecipeOption);

    // Add the first recipe option on page load
    addRecipeOption();
});

#addRecipeOption {
    background-color: tomato;
    cursor: pointer;
    display: table;
    margin-bottom: 5px;
    margin-top: 10px;
    min-width: 100px;
    padding: 10px;
    text-align: center;
}
#recipe-template-wrapper {
    display: none;
}
.recipe-options-line {
    border-bottom: 1px solid;
    margin-bottom: 15px;
    padding-bottom: 10px;
}

<!-- Add option button -->
<div class="text-center mb-15">
    <a class="m-0 btn btn-outline btn-shadow-1 btn-info hvr-underline-from-left btn-sm btn-block" id="addRecipeOption">
        <i class="glyphicon glyphicon-plus"></i>option
    </a>
</div>

<!-- Recipe option divs will be appended here -->
<div class="col-md-12" id="recipe-options-div"></div>

<!--
    Hidden recipe option template HTML
    Elements' custom data-* attributes will be used to set their name attributes
-->
<div id="recipe-template-wrapper">
    <div class="recipe-options-line">
        <div class="col-md-3">
            <div class="fancy-form">
                <div contenteditable="true" class="form-control limit-textarea autocomplete-textarea" data-placeholder="Anzahl"></div>
                <textarea class="hide" data-recipe="number" rows="1"></textarea>
                <i class="fa fa-dot-circle-o">
                    <!-- icon -->
                </i>
                <span class="maximum-limit"></span>
            </div>
        </div>
        <div class="col-md-3">
            <div class="fancy-form">
                <div contenteditable="true" class="form-control limit-textarea autocomplete-textarea" data-placeholder="Einheit"></div>
                <textarea class="hide" data-recipe="unit" rows="1"></textarea>
                <i class="fa fa-dot-circle-o">
                    <!-- icon -->
                </i>
                <span class="maximum-limit"></span>
            </div>
        </div>
        <div class="col-md-6">
            <div class="fancy-form">
                <div contenteditable="true" class="form-control limit-textarea autocomplete-textarea" data-placeholder="Zutatenname"></div>
                <textarea class="hide" data-recipe="name" rows="1"></textarea>
                <textarea data-limit-target class="limit-textarea hide recipe-options-textarea" data-maxlength="250"></textarea>
                <i class="fa fa-comment">
                    <!-- icon -->
                </i>
                <span id="unique-10-1" class="maximum-limit"></span>
            </div>
        </div>
    </div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Answer 2

嗯，你误解了记忆的概念。

当您克隆项目时。在 insertit

之前对其进行更改

示例。

    $("button").click(function(){
    var inputCloned = $("input").last().clone();
    // make changes
    inputCloned.val("input nr " + $("input").length)

    // add the cloned input to the body
    $("body").append(inputCloned)

    })

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <button>Clone last item</button>

    <input type="text" />

复制div，改变并输出到视图

Copy div, change and output to the view

html

javascript

css

jquery

clone