jquery - 如何将标签放置在span元素内wpcf7-form-control-wrap

我想将输入元素的标签放在cf7短代码生成的span元素内-这可能吗？

我要这样做的原因是我试图使标签仅在输入字段具有：focus时出现

为此，标签和输入必须位于同一元素内，因此我可以使用以下css选择器进行定位：

输入ID：焦点+ .label-class

我尝试将生成的HTML标记粘贴到CF7中，然后将标签移动到内部（而不是使用短代码），这可以实现我想要的功能，但是这会导致一个奇怪的问题，即“ required”属性不再起作用-所有字段都是必需的，但是现在可以将表单提交为空

这是CF7生成的：

<span class="wpcf7-form-control-wrap your-name-wrap">
<input type="text" name="your-name" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required" id="your-name-1" aria-required="true" aria-invalid="false" placeholder="Name"></span>
<label for="your-name" class="label-helper">Name</label>

这就是我要的：

<span class="wpcf7-form-control-wrap your-name-wrap">
<input type="text" name="your-name" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required" id="your-name-1" aria-required="true" aria-invalid="false" placeholder="Name">
<label for="your-name" class="label-helper">Name</label></span>

我尝试实现上述HTML而不是使用CF7短代码，但不再需要

最佳答案

请检查是否有帮助。我认为您在每个函数或循环中都使用过。

var getLabel = $(".wpcf7-form-control-wrap").next("label").detach();
        $(".wpcf7-form-control-wrap").append(getLabel);

.wpcf7-form-control:focus + .label-helper{color: red;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span class="wpcf7-form-control-wrap your-name-wrap">
<input type="text" name="your-name" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required" id="your-name-1" aria-required="true" aria-invalid="false" placeholder="Name"></span>
<label for="your-name" class="label-helper">Name</label>