Question

我们正在使用Contact Form 7插件，并希望在Contact Form 7生成的html代码中引入一个额外的元素（斜体（i））。

联系表格7短标签：

[checkbox* areas_checkbox id:ftype_box class:checkbox use_label_element "Option1" "Option2" "Option3"]

CF7生成的HTML：

<span class="wpcf7-list-item first">
    <label>
    <input type="checkbox" name="areas_checkbox[]" value="Xero">
    <span class="wpcf7-list-item-label">Option1</span>
</label>
</span>
...

出于造型原因，为什么需要在选项之前添加斜体（i）元素 - 选项1，选项2等跨越所以它看起来像这样：

CF7生成的HTML：

<span class="wpcf7-list-item first">
<label><input type="checkbox" name="areas_checkbox[]" value="Xero">
<i></i>
<span class="wpcf7-list-item-label">Option1</span>
</label>
</span>
...

这可以通过jquery还是通过CF7短代码（php）来实现？

Answer 1

您可以使用before()在<i></i>之前插入span。

＆＃13;

$(document).ready(function(){
  //$( "i" ).insertBefore( $( ".wpcf7-list-item-label" ) );
  $('.wpcf7-list-item-label').before('<i></i>');
})

＆＃13;

i{border:1px solid red; display:inline-block; height:10px; width:10px}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="wpcf7-list-item first">
    <label>
    <input type="checkbox" name="areas_checkbox[]" value="Xero">
    <span class="wpcf7-list-item-label">Option1</span>
</label>
</span>

＆＃13;

在Contact Form 7生成的html中添加一个html元素

1 个答案: