2

这是我必须处理的：

<nf-field>
    <div id="nf-field-2-container" class="nf-field-container lastname-container  label-above ">
        <div class="nf-before-field">
            <nf-section></nf-section>
        </div>
        <div class="nf-field">
            <div id="nf-field-2-wrap" class="field-wrap lastname-wrap nf-fail nf-error" data-field-id="2">
                <div class="nf-field-label">
                    <label for="nf-field-2" class="">Last Name <span class="ninja-forms-req-symbol">*</span> </label>
                </div>
                <div class="nf-field-element">
                    <input id="nf-field-2" name="nf-field-2" class="ninja-forms-field nf-element" type="text" value="">
                </div>
            </div>
        </div>
        <div class="nf-after-field">
            <nf-section>
                <div class="nf-input-limit"></div>
                <div class="nf-error-wrap nf-error">
                    <div class="nf-error-msg nf-error-required-error">This is a required field.</div>
                </div>
            </nf-section>
        </div>
    </div>
</nf-field>

请注意<nf-field>标签。它不是 HTML 并且没有任何东西可以用来设置它的样式，关于它是什么类型的输入，即。文本、文本区域等

我以前没有使用backbone.js 的经验，并且Ninja Forms 的所有javascript 都被缩小了，所以我什至不知道从哪里开始。这就是我想出的：

(function ($) {
    $(window).load(function(){
        $('.nf-field-container').unwrap('nf-field');
    });
})(jQuery);

这个 javascript 被放置在页面的最底部，就在</body>. 当我发现由于某种原因它只适用于硬重载时（至少当我在 localhost 上开发时），我的兴奋是短暂的。

4

1 回答 1

0

整个表单被包装在一个具有类的 div 中.nf-form-cont（或者如果没有，就创建它）。

你的 JS 应该是这样的：

(function ($) {
     $(window).load(function(){
       // Remove unnecessary NF mark ups
       $('.nf-form-cont').find("nf-field").contents().unwrap();
       $('.nf-form-cont').find("nf-fields-wrap").contents().unwrap();
       $('.nf-form-cont').find("nf-section").contents().unwrap();
       $('.nf-form-cont').find("nf-errors").contents().unwrap();
     });
})(jQuery);
于 2019-02-26T13:14:21.650 回答