数组推送功能无法正常工作

Question

问题很简单，我正在尝试将值推送到数组中，但它每次都会创建新的值而不是添加我尝试了很多方法来做同样的事情你可以在这里检查代码我实际上在做什么$(function(){        // Append Theme Pages let counter = 2;     $(".js-append-pages").on("click", function(){        $(".js-pages-append-area").append(            `<div class="input-field col xs12 s6">                    <input name="page_${counter}" id="page_${counter}" type="text" class="validate">                    <label for="page_${counter}">Page Name</label>                </div>                <div class="file-field input-field col xs12 s6">                    <div class="btn">                        <span>Image</span>                        <input type="file">                    </div>                    <div class="file-path-wrapper">                        <input name="page_${counter}_img" class="file-path validate" type="text">                    </div>                </div>`);                let inputArr = ["page_1"];            inputArr.push(`page_${counter}`);            console.log(inputArr);                counter++; });})

Answer 1

  $(function (){

    let counter = 1;

    let inputArr = ["page_1"];

    $(".js-append-pages").on("click", function ()

    {

        $(".js-pages-append-area").append(

            `<div class="input-field col xs12 s6">

                <input name="page_${counter}" id="page_${counter}" type="text" class="validate">

                <label for="page_${counter}">Page Name</label>

            </div>

            <div class="file-field input-field col xs12 s6">

                <div class="btn">

                    <span>Image</span>

                    <input type="file">

                </div>

                <div class="file-path-wrapper">

                    <input name="page_${counter}_img" class="file-path validate" type="text">

                </div>

            </div>`);

        inputArr.push(`page_${++counter}`);

        console.log(inputArr);

    });

});

这应该是一个更好的实现方式。