Question

我有一个用JS编写的小脚本用于表单。脚本如下所示：

$(document).ready(function() {
    // Test for placeholder support
    $.support.placeholder = (function(){
        var i = document.createElement('input');
        return 'placeholder' in i;
    })();

    // Hide labels by default if placeholders are supported
    if($.support.placeholder) {
        $('.form-label').each(function(){
            $(this).addClass('js-hide-label');
        });  

        // Code for adding/removing classes here
        $('.form-group').find('input, textarea').on('keyup blur focus', function(e){
            console.log(e);
            // Cache our selectors
            var $this = $(this),
                $parent = $this.parent().find("label");

            if (e.type == 'keyup') {
                if( $this.val() == '' ) {
                    $parent.addClass('js-hide-label'); 
                } else {
                    $parent.removeClass('js-hide-label');   
                }                     
            } 
            else if (e.type == 'blur') {
                if( $this.val() == '' ) {
                    $parent.addClass('js-hide-label');
                } 
                else {
                    $parent.removeClass('js-hide-label').addClass('js-unhighlight-label');
                }
            } 
            else if (e.type == 'focus') {
                if( $this.val() !== '' ) {
                    $parent.removeClass('js-unhighlight-label');
                }
            }
        });
    } 
});

这是我在HTML中的表单：

          <form id="contact-form" class="form" action="#" method="POST" role="form">
              <div class="form-group">
                  <label class="form-label" for="name">Your Name</label>
                  <input type="text" class="form-control" id="name" name="name" placeholder="Your Name"  required>
              </div>                           
              <div class="form-group">
                  <label class="form-label" for="email">Your Email</label>
                  <input type="email" class="form-control" id="email" name="email" placeholder="Your Email"  required>
              </div>                            
              <div class="form-group">
                  <label class="form-label" for="subject">Subject</label>
                  <input type="text" class="form-control" id="subject" name="subject" placeholder="Subject">
              </div>                            
              <div class="form-group">
                  <label class="form-label" for="message">Message</label>
                  <textarea rows="5" cols="50" name="message" class="form-control" id="message" placeholder="Message..."  required></textarea>                                 
              </div>
              <div class="text-center">
                  <button type="submit" class="btn btn-start-order">Send Message</button>
              </div>
          </form>

这很有效，如下所示：https://codepen.io/stephanrusu/pen/QwKLJX

我修改了表单，在输入/ textarea周围有<span></span>个标签。在JS中，这需要在范围内查找具有类名input and textfield的{{1}}。所以我的HTML现在看起来像这样：

wpcf7-form-control-wrap

所以我的问题是如何修改JS以使用以下表单。所有这些都是在输入和textareas附近。

非常感谢您的期待。

Answer 1

在您的代码中，只需更改行：

$parent = $this.parent().find("label");

到

$parent = $this.closest(".form-group").find("label");

更新表单后，$(this).parent()会引用<span>而不是<label>。 $this.closest(".form-group").find("label")会正确引用label元素。

修改JS以满足新的HTML表单

1 个答案: