Блог

Главная - Вопросы по программированию - Синтаксическая ошибка в jQuery hover()

Синтаксическая ошибка в jQuery hover()

#jquery #syntax #navigation #hover

#jquery #синтаксис #навигация #наведите курсор

Вопрос:

Я пытаюсь создать сайт с меню навигации, которое переключает класс при наведении курсора мыши на кнопки навигации, которые в данный момент не «выбраны» или «активны». Вот простая версия кода:

 <html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<style type="text/css">
ul li a.selected {font-weight:bold;}
ul li a.hover {color:yellow;}
div.page {position:absolute;}
</style>

<script type="text/javascript">
$(function(){
    $("div.page:not(:first)").hide();   // hide all pages except the home page

    var menu=$("div.navMenu ul li a");
    menu.click(function(){
        var previous=window.location.hash;
        var selected=$(this).attr("href");
        if (previous != selected) {
            $("div.page" previous).fadeOut();
            $("div.page" selected).fadeIn();
            }
        $(this).addClass("selected");
        menu.not(this).removeClass("selected");
    });

    menu.hover(function(){
        $(this:not(.selected)).toggleClass("hover");
    });

});
</script>
</head>
<body>
<div class="navMenu">
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#portfolio">Portfolio</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</div>
<div class="page" id="home">This is my home page.</div>
<div class="page" id="portfolio">This is my portfolio page.</div>
<div class="page" id="contact">This is my contact page.</div>
</body>
</html>

Dreamweaver указывает, что в строке с

 $(this:not(.selected)).toggleClass("hover");

Однако я не вижу, в чем заключается синтаксическая ошибка. (Идея состоит в том, чтобы переключать класс «hover» только для кнопок меню, у которых нет класса «selected»). Буду признателен за любую помощь.

Ответ №1:

Я считаю, что это должно быть:

 $(this).not(".selected").toggleClass("hover");

Комментарии:

1. Привет, действительно, это оно! Спасибо.

2. Кстати, в «if .. hasClass», похоже, нет необходимости; насколько я могу судить, «removeClass» в любом случае ничего не делает, если элемент не имеет этого класса.

3. Рад, что у вас все получилось. Не забудьте принять ответ, если вы удовлетворены.

Ответ №2:

Вероятно, это должно быть $(this).not(".selected").toggleClass("hover"); или около того

Ответ №3:

$(this:not(.selected)).toggleClass("hover"); выражение недопустимо.

Используйте что-то вроде:

 menu.hover(function(){
        if ($(this).hasClass('selected'))
            $(this).addClass("hover");
    }, function() {
        if ($(this).hasClass('selected'))
            $(this).removeClass("hover");
    });
Метки: