javascript - JS / HTML：向搜索输入的父级添加类不起作用

Question

您好我正在尝试选择搜索输入的父 DIV，以便在搜索输入聚焦时更改背景颜色。我很困惑为什么这段代码不起作用。谢谢你的帮助。

http://jsfiddle.net/BZ5uf/1/

HTML

<div class="search">  
   <input class="box" value="Search" onfocus="if(this.value=='Search') this.value='';" onblur="(this.value=='') this.value='Search';">
</div>

CSS

.search {
    position: relative;
    margin: 20px; 
    width: 300px;
    height: 65px;
    border: 1px solid black;

}
input.box { 
    margin: 10px;
}

.fill {
    background: #222;
}

JAVASCRIPT

$(function(){
    $('.box').focus(function(){
        $(this).parent().addClass('fill');
 )};

Answer 1

语法错误很多。

)}; //mismatched order

应该

    });
}); //you also forgot to close DOM ready handler

还可以尝试使用小提琴顶部的“JSHint”按钮。

好的 IDE 也会为您突出显示这些错误。使用适当的缩进也有助于找到未关闭的处理程序：

$(function () {
    $('.box').focus(function () {
        $(this).parent().addClass('fill');
    });
});

上述格式是使用 jsfiddle 的“TidyUp”按钮获得的。这是您更新的小提琴。

Answer 2

jsFiddle 上的工作示例。

$('.box').on('blur', function () {
    $(this).parent()
           .addClass('fill');
});

Answer 3

您的 JavaScript 中有一个错误：

改变这个：

$('.box').focus(function(){
    $(this).parent().addClass('fill');
)};

到 ：

$('.box').focus(function(){
    $(this).parent().addClass('fill');
});

（注意翻转的大括号顺序）

Answer 4

你的JS有错字，应该是这样的

$(function(){
    $('.box').focus(function(){
         $(this).parent().addClass('fill');
    });
});

Answer 5

看起来你有语法错误。这是正确的代码：

$(function(){
    $('.box').focus(function(){
        $(this).parent().addClass('fill');
    });
});

Answer 6

试试这个。

   $(function(){
    $('.box').focus(function(){
        $(this).parent().addClass('fill');
    });
});