Скопируйте div, измените и выведите в представление - PullRequest
Новая
       22

Скопируйте div, измените и выведите в представление

0 голосов
/ 26 сентября 2019

Я немного перегружен сейчас.Я хочу скопировать последний div с классом .recipe-options-line и вставить его за последним div с классом .recipe-options-line.Это работает до сих пор.

Я должен внести некоторые изменения в элемент перед вставкой div.Как я могу это сделать?

  1. Я хочу удалить любые записи в текстовой области, которые присутствуют в скопированном элементе.
  2. Я хочу заменить в скопированном элементе число вtextarea (name = "recipeOptions [0] [number]") содержимым переменной RecipeOptionNumber.
  3. я хочу заменить в скопированном элементе последнее число data-limit-target = "unique-10-1 "и span id =" unique-10-1 "в последнем div с содержимым переменной 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 ++;
    });

Ответы [ 2 ]

1 голос
/ 26 сентября 2019

Возможно ли это?Или я должен искать другое решение?Кто-нибудь может мне помочь?

Да, конечно, это возможно!Хорошим решением здесь было бы создать пустой шаблон для параметров рецепта и повторно использовать функцию, чтобы добавить их программно.Смотрите пример ниже с комментариями: 

$(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>
0 голосов
/ 26 сентября 2019

Ну, вы неправильно понимаете эту концепцию памяти.

Когда вы клонируете предметы.внести изменения в него перед вставкой

Пример. 

    $("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" />
...