2012-06-08 3 views
4

Я пытаюсь применить стиль при запуске события mouseenter, но если я раскомментирую следующий нетронутый селектор - даже документ готов к работе.Ошибка javascript/jQuery с событием mouseenter, вызывающим ошибку синтаксиса

<body> 
<div id="1" class="button untouched"></div> 
<script src="/jquery.js"></script> 
<script> 
$(document).ready(function(){ 
    alert("JQuery is working"); 
}); 

/* 
$(".untouched").mouseenter($function(){ 
    $(this).addClass("touched"); 
}); 
*/ 
</script> 
</body> 

Я следую примеру найти по адресу:

http://api.jquery.com/mouseenter/

И я получаю following error in Firebug:

missing) after argument list 
[Break On This Error] 

$(".untouched").mouseenter($function(){ 

Поскольку он не работает, я сделал ошибку, но я не знаю, что. Все, что я знаю, это то, что ни один из моих кодов не работает, если я позволю этому запуску. Я загрузил последнюю версию jQuery версии 1.7.2, которая, как я знаю, доступна на странице, потому что alert() работает с другим комментарием.

+3

Это синтаксическая ошибка Javascript, а не проблема jQuery. –

+0

@JaredFarrish Как я мог обнаружить эту опечатку - я привык к скомпилированным языкам? –

+0

Спасибо всем - я знал, что это была глупая опечатка где-то - без знания синтаксиса, хотя его трудно заметить. –

ответ

2

В вашем скрипте часть $(".untouched") должна быть в пределах функции ready. Кроме того,

mouseenter($function(){ Неверный знак $.

Ваш окончательный сценарий должен выглядеть следующим образом:

$(document).ready(function(){ 
    alert("JQuery is working"); 

    $(".untouched").mouseenter(function(){ 
     $(this).addClass("touched"); 
    }); 
}); 
+0

Нет причин переместить код в '$ (document) .ready'. 'alert (« JQuery работает »);' не нужно находиться внутри него либо на самом деле. – Paulpro

+0

@ PaulP.R.O. - Вы имеете в виду причину, по которой это не нужно в 'doc.ready', потому что элемент, который он ссылается, уже находится в DOM? –

+0

@ JaredFarrish Да. Зачем вам ждать, когда весь DOM будет готов, когда вы сможете это сделать сразу: – Paulpro

4

Нет необходимости в $ перед функцией. Кроме того, код функции события mouseenter должен быть внутри документа готовым.

<script> 
    $(document).ready(function(){ 
     alert("JQuery is working"); 

     $(".untouched").mouseenter(function(){ 
      $(this).addClass("touched"); 
     }); 
    }); 
</script> 
2

У вас есть дополнительный $ вы не должны перед словом function. Возможно, вы также хотите удалить untouched класс:

$(".untouched").mouseenter(function(){ 
    $(this).removeClass("untouched").addClass("touched"); 
}); 
+0

Мне было интересно об удалении класса - так как добавление полагается на правила замены CSS. Я все еще пытаюсь получить синтаксис jquery вокруг головы - из мира C++ :-) - у меня раньше было что-то похожее на 2 LOCS, но это похоже на jquery style. –

1

Вы можете легко выполнять это право с помощью CSS

.untouched 
     { 
     background: green; 
     } 

    .untouched :hover 
     { 
     background: blue 
     } 

В JQuery, если вы хотите использовать .mouseover вам нужно функций - один, когда вы наведите указатель мыши на один, когда мышь не закончилась. Это проще в css, есть только a: hover filter

 $('.untouched').mouseover(function() { 
       $(this).addClass('touched'); 
        }); 
     $('.untuoched').mouseout(function() { 
       $(this).removeClass('touched'); 
         }); 
+0

Спасибо Скотту. На самом деле я хотел создать экран блокировки типа Android, пропустив мышь по сетке, чтобы выбрать шаблон - я упростился, потому что он не работал. Как только «пароль» выбран, я хотел разблокировать новый экран. –