Question

我正在尝试创建一个联系表单，用户单击输入/ textarea，标签出现在输入/ textarea的顶部，如下所示： the correct outcome

我已经创建了HTML和CSS但我的问题是使用Javascript（Jquery）。每次用户尝试键入其中一个输入时，所有标签都会出现，这不是我想要做的。

JS：

PUT

此问题的代码是https://codepen.io/mrsalami/pen/EovXEX

Answer 1

你已经混淆了隐藏类，请参阅更正的部分：

＆＃13;

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

＆＃13;

或者你可以这样做：

＆＃13;

                if (e.type == 'keyup') {
                    if( $this.val() == '' ) {
                        $('label').removeClass('js-hide-label');
                    } else {
                        $('label').addClass('js-hide-label');
                        $this.parent().prev().removeClass();
                        $this.parent().prev().addClass('form-label');
                    }
                }

＆＃13;

Answer 2

我进行了2次更改并完成了这项工作。正如Taplar在评论中提到的那样，你找到了所有的标签。我更新了该行以查找父div的prev元素，该元素是form-group的标签。我还改变了你的if else逻辑，使用你正在缓存的$ parent元素（现在是标签元素）

    // Code for adding/removing classes here
    $('.form-group').find('input, textarea').on('keyup blur focus', function(e){

        // Cache our selectors
        var $this = $(this),
            // fixed this line to find prev()
            $parent = $(this).parent().prev();

        // update all of the statements to use $parent(link element)
        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');
            }
        }
    });

Answer 3

有多个错误。 $ parent变量错误地选择了关联的标签，其名称与它的名称不匹配。在$ label中重命名它。然后用$ label替换所有$（＆＃39;标签＆＃39;）。

请参阅https://codepen.io/anon/pen/OzjjxN?editors=1010

固定代码：

var $this = $(this),
$label = $this.closest('.form-group').find("label");


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

尝试使用父函数添加/删除css类

3 个答案: