这是我要处理的:
<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上开发时),我的兴奋是短暂的。
整个表单包含在具有类.nf-form-cont
的div中(或者如果没有则创建它)。
你的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);