如何串联一个与Jinja2 Expression相对的计数器?

时间:2018-07-05 21:20:52

标签: flask jinja2

var operator = 1;

        function add_fields() {
            operator++; 
            var objTo = document.getElementById('name_fields');
            var divtest = document.createElement("div");
            divtest.setAttribute("class", "form-group removeclass"+operator);
            var rdiv = 'removeclass'+operator;
            divtest.innerHTML = '<h5 class="support-subform-label" style="text-align: left;">Equipment Operator(s) </h5> <div class="support-subform-box" id="js-section'+ operator +'"> <label id="first_name-group" for="first_name" class="small-12 medium-6" style="text-align: left; float: left;"> First Name {{ form.first_name }} </label><label id="last_name-group" for="last_name" class="small-12 medium-6" style="text-align: left; float: right;"> Last Name {{ form.last_name }} </label><label for="email" style="text-align: left;"> Email {{ form.email }} </label><label id="phone-number-group" for="phone-number" class="small-12 medium-7" style="text-align: left; float: left;"> Phone Number {{ form.phone.number }} </label><label id="phone-extension-group" for="phone-extension" class="small-12 medium-5" style="text-align: left; float: left;"> ext {{ form.phone.extension }} </label><label class="small-12" style="text-align: left;"> Title {{ form.position }} </label> <br> <div class="input-group-btn"> <button class="btn btn-success" type="button" onclick="remove_fields('+ operator +');"> Remove </button> </div> </div>';

            objTo.appendChild(divtest);
            scroll(operator);
        }

我试图将计数器(operator)添加到每个Jinja表达式{{ form.first_name }}中,就像我做id="js-section'+ operator +'"一样。因此,例如:如果将operator设置为2,则{{ form.first_name }}的ID将为id =“ first_name2”,依此类推,具体取决于计数器。

我尝试过

{{ form.first_name'+ operator +' }}  

复制我的工作id="js-section'+ operator +'",但是显然那没用。谢谢!

下面是可读格式的divtest.innerHTML。

        <h5 class="support-subform-label"
            style="text-align: left;">Equipment Operator(s)
        </h5>
        <div class="support-subform-box" id="js-section'+ operator +'">
            <label id="first_name-group" for="first_name"
                class="small-12 medium-6"
                style="text-align: left;
                       float: left;">
                First Name<b style="color: red;">*</b>
                {{ form.first_name }}
            </label>

            <label id="last_name-group" for="last_name"
                class="small-12 medium-6"
                style="text-align: left;
                       float: right;">
                Last Name<b style="color: red;">*</b>
                {{ form.last_name }}
            </label>
            <label for="email"
                style="text-align: left;">
                Email<b style="color: red;">*</b>
                {{ form.email }}
            </label>
            <label id="phone-number-group" for="phone-number"
                class="small-12 medium-7"
                style="text-align: left;
                    float: left;">
                Phone Number<b style="color: red;">*</b>
                {{ form.phone.number }}
            </label>
            <label id="phone-extension-group" for="phone-extension" class="small-12 medium-5"
                style="text-align: left; float: left;">
                ext
                {{ form.phone.extension }}
            </label>

            <label class="small-12"
               style="text-align: left;">
            Title<b style="color: red;">*</b>
            {{ form.position }}
            </label>
            <div class="input-group-btn">
                <button class="btn btn-success" type="button" onclick="remove_fields('+ operator +');"> Remove </button>
            </div>
        </div>

0 个答案:

没有答案