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». Вот ваш updated fiddle.

Answer 2

У вас есть опечатка в ваших JS, он должен быть, как это

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

Answer 3

Похоже, у вас была ошибка синтаксиса. Вот правильный код:

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

Answer 4

Попробуйте это.

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

Answer 5

Существует ошибка в вашем JavaScript:

изменить это:

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

к:

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

(обратите внимание на перевернутый порядок скобка)

Answer 6

Working example on jsFiddle.

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