Упростите мой код JS - PullRequest
Новая
       8

Упростите мой код JS

1 голос
/ 29 июня 2011

Я только что сделал этот код для меню сайта. Проблема в том, что я уверен, что это можно упростить.

Я не знаю, смогу ли я использовать переключатель или что-то еще, я только начинающий с Jquery .... 

$(document).ready(function() {

/* Effet hover sur onglet Accueil */
$("#menu-top li a.accueil").mouseover(function() {

    if (($("#menu-top li a.accueil").is(".active")) || ($("#menu-top li a.services").is(".active")) || ($("#menu-top li a.realisations").is(".active"))) {
            return false;
    } else {
            $(this).removeClass("rightactive");
            $(this).addClass("righthover");
    }

    $("#menu-top li a.accueil")}).mouseout(function(){

    if (($("#menu-top li a.accueil").is(".active")) || ($("#menu-top li a.services").is(".active")) || ($("#menu-top li a.realisations").is(".active"))) {
            return false;
    } else {
        $(this).removeClass("righthover");
        $(this).addClass("rightactive");
    }

    }); 

/* Effet hover sur onglet Entreprise */
$("#menu-top li a.entreprise").mouseover(function() {

    if (($("#menu-top li a.entreprise").is(".active")) || ($("#menu-top li a.realisations").is(".active")))  {
            return false;

    } else if ($("#menu-top li a.services").is(".active")) {
        $(this).removeClass("rightactive");
        $(this).addClass("righthover");

    } else {
            $(this).removeClass("leftactive");
            $(this).addClass("lefthover");
    }

    $("#menu-top li a.entreprise")}).mouseout(function(){

    if (($("#menu-top li a.entreprise").is(".active")) || ($("#menu-top li a.realisations").is(".active"))) {
            return false;

    } else if ($("#menu-top li a.services").is(".active")) {
        $(this).removeClass("righthover");
        $(this).addClass("rightactive");

    } else {
            $(this).removeClass("lefthover");
            $(this).addClass("leftactive");
    }

    });

/* Effet hover sur onglet Services */
$("#menu-top li a.services").mouseover(function() {

    if (($("#menu-top li a.services").is(".active")) || ($("#menu-top li a.accueil").is(".active"))) {
            return false;

    } else if ($("#menu-top li a.realisations").is(".active")) {
        $(this).addClass("righthover");
        $(this).removeClass("rightactive");

    } else {
            $(this).removeClass("leftactive");
            $(this).addClass("lefthover");
    }

    $("#menu-top li a.services")}).mouseout(function(){

    if (($("#menu-top li a.services").is(".active")) || ($("#menu-top li a.accueil").is(".active"))) {
            return false;

    } else if ($("#menu-top li a.realisations").is(".active")) {
        $(this).removeClass("righthover");
        $(this).addClass("rightactive");

    } else {
        $(this).removeClass("lefthover");
        $(this).addClass("leftactive");
    }


    });

/* Effet hover sur onglet Réalisations */
$("#menu-top li a.realisations").mouseover(function() {

    if (($("#menu-top li a.realisations").is(".active")) || ($("#menu-top li a.accueil").is(".active")) || ($("#menu-top li a.entreprise").is(".active"))) {
            return false;
    } else {
            $(this).removeClass("leftactive");
            $(this).addClass("lefthover");
    }

    $("#menu-top li a.realisations")}).mouseout(function(){

    if (($("#menu-top li a.realisations").is(".active")) || ($("#menu-top li a.accueil").is(".active")) || ($("#menu-top li a.entreprise").is(".active"))) {
            return false;
    } else {
        $(this).removeClass("lefthover");
        $(this).addClass("leftactive");
    }


    });
    });

Это мой HTML 

<nav id="menu-top">
     <ul>
        <li><a href="index.php" class="accueil active">Accueil</a></li>
        <li><a href="entreprise.php" class="entreprise leftactive">Entreprise</a></li>
        <li><a href="services.php" class="services">Services</a></li>
        <li><a href="realisations.php" class="realisations">Réalisations</a></li>
     </ul>
    </nav>

Любая помощь с этим будет принята с благодарностью.

Спасибо.

1 Ответ

1 голос
/ 29 июня 2011

Я предлагаю вам изменить теги на что-то вроде: 

<a href="index.php" data-link="accueil" class="active">Accueil</a>

В javascript у вас может быть хеш-таблица, называемая rel, чтобы поместить все сложные зависимости между ссылками 

;(function(){
    var rels = {
        'entreprise': ['entreprise', 'realisations'],
        'services': ['services', 'realisations'],
        ...
    }

    function checkRels(link){
        var other = rels[link];
        for(var i = 0; i < other.length; i++){
            if($('#menu-top li a[data-link="' + other[i] + '"]').is('.active')){
                return false;
            }
        }
        return true;
    }

    $("#menu-top li a").mouseover(function() {
        var link = $(this).attr('data-link');
        if(!checkRels(link))return false;
        $(this).removeClass("rightactive");
        $(this).addClass("righthover");
    }).mouseout(function(){
        var link = $(this).attr('data-link');
        if(!checkRels(link))return false;
        $(this).removeClass("righthover");
        $(this).addClass("rightactive");
    }); 
}())

Если вы хотите изменить зависимости или добавить больше, вы можете просто настроить rel вместо того, чтобы менять много кодов.

...