Undgå att använda variabler med fasta adresser

jonathanh · 1 mars

Jag jobbar på en hemsida där toppmeny länken ska vara i aktiv status och undermeny länken med som matchar
en artikels kategori som t.ex. upplev och besök> boende > hus på landet. alltså då ska följande visas i
aktiv status upplev och besök och boende. jag har lyckats att göra detta men jag använder mig av
variabler som jag har satt ditt fasta adresser på för varje kategori.

T.ex. när användaren är inne på en produkt sida
så kollar en else if sats om adressen är (window.location.href.indexOf(arkivNyheterAdress) > -1) sätt en bakgrundsfärg
och hover på den första toppmenylänken och sen $(".nav div div a:eq(0)").addClass("svart-text-vit-bg"); på underlänken.
när den gå på nästa artikel kategori som t.ex evenemang så ska följande vara aktiva upplev och besök och
$(".nav div div a:eq(1)").addClass("svart-text-vit-bg").

Vad jag undrar är om det finns något sätt att undgå att
använda variabler med fasta adresser på och hitta en annan lösning? hoppas att ni förstår vad jag är ute efter:)

Har testat lite med switch case men kände att där får jag ändå sätta ditt fasta adress i koden.
vilket jag helst skulle vilja undvika.

Här nedan har ni jQuery koden så som den ser ut idag.

/* 2019 Vetlanda kommun */
$(document).ready(function() {
  /*-------------------Adress variablar--------------------------*/
  /*Adress för startsidan*/
  var aktAdress = " ";
  aktAdress = "https://vetlanda.se/2.1d2a7c7616342fe18ec4a777.html";
  /*Adress för övrigtsidan*/
  var ovrigtAdress = "";
  ovrigtAdress = "https://vetlanda.se/ovrigt/";
  /*Adress för kontaktsidan*/
  var kontaktAdress = "";
  kontaktAdress = "https://vetlanda.se/kontaktaoss.4.a225ea0163f45910d2705f.html";
  
  /*Artikelarkiv adress start*/
  var arkivBoende = "";
  arkivBoende = "https://vetlanda.se/artikelarkiv/boende/";
  var arkivEvenemang = "";
  arkivBoende = "https://vetlanda.se/artikelarkiv/evenemang/";
  var arkivMatOchDryck = "";
  arkivMatOchDryck = "https://vetlanda.se/artikelarkiv/matochdryck/";
  var arkivShopping = "";
  arkivShopping = "https://vetlanda.se/artikelarkiv/shopping/";
  var arkivUpplev = "";
  arkivUpplev = "https://vetlanda.se/artikelarkiv/upplev/";
  /*Artikelarkiv adress slut*/
  
  /*Utförande kod för aktiv och matchande undermeny samt hover funktion för meny länkar*/
  /*Hover, toggle och focus ut funktion för första sidan*/
  if ((location.href == aktAdress) || (window.location.href.indexOf(kontaktAdress) > -1)) {
   startkontaktFunktioner();
  } else if (location.href != aktAdress);
  /*Visar undermenyn som matchar toppmenylänken*/
  $(".nav div [href]").each(function() {
    if (this.href == window.location.href) {
      $(this).parent().css({
        "background": "#d2d2d2",
        "color": "black"
      });
      $(this).parent().addClass("active hover");
      $("div.sub div.child:last-child").focusout(function() {
        $(".nav div").removeClass("hover");
      });
      /*Toggleknapp funktion för nivå 2 undermeny
        och dölja aktiv undermeny*/
      $(".nav div").on("click", "button", function() {
        $(".nav div.hover").toggleClass("hover");
        $(this).closest(".nav div").toggleClass("hover");
      });
      mouseOverOut();
    }
    /*Hover och aktiv funktion på menyn för sidan arkiv boende*/
    else if ((window.location.href.indexOf(arkivBoende) > -1)) {
      $(".nav div div a:eq(0)").addClass("svart-text-vit-bg");
      artikelFunktioner();
    }
    /*Hover och aktiv funktion på menyn för sidan arkiv evenemang*/
    else if ((window.location.href.indexOf(arkivEvenemang) > -1)) {
      $(".nav div div a:eq(1)").addClass("svart-text-vit-bg");
      artikelFunktioner();
    }
     /*Hover och aktiv funktion på menyn för sidan arkiv mat och dryck*/
    else if ((window.location.href.indexOf(arkivMatOchDryck) > -1)) {
      $(".nav div div a:eq(2)").addClass("svart-text-vit-bg");
      artikelFunktioner();
    }
    /*Hover och aktiv funktion på menyn för sidan arkiv shopping*/
    else if ((window.location.href.indexOf(arkivShopping) > -1)) {
      $(".nav div div a:eq(4)").addClass("svart-text-vit-bg");
      artikelFunktioner();
    }
    /*Hover och aktiv funktion på menyn för sidan arkiv upplev*/
    else if ((window.location.href.indexOf(arkivUpplev) > -1)) {
      $(".nav div div a:eq(5)").addClass("svart-text-vit-bg");
      artikelFunktioner();
    }
    /*Visar matchande undermeny för nivå 3 samt aktiv länk*/
    else($(".nav div div [href]").each(function() {
      if (this.href == window.location.href) {
        $(this).parents().eq(3).addClass("active hover").css("background", "#d2d2d2");
	$(this).addClass("svart-text-vit-bg");
        $(this).hover(function() {
          return false;
        });
        mouseOverOut();
      }
    }));
  });
  /*----------------------Funktioner---------------------------------*/
 /*Hover funktion för länkar*/
 function linkHover() {
  $(".nav div").hover(function() {
   $(this).addClass("hover");
  }, function() {
   $(this).removeClass("hover");
  });
 }
 /*Togglebutton funktion för visning av undermeny*/
 function toggleButton() {
  $("button").click(function() {
   $(this).closest(".nav div").toggleClass("hover");
  });
 }
 /*Focusout funktion för döljande av undermeny efter sista tab
 på sista länken i undermeny*/
 function focusOut() {
  $("div.sub div.child:last-child").focusout(function() {
   $(".nav div").removeClass("hover");
  });
 }
 /*Mouseover funktion för att dölja aktiv undermeny och
 Mouseout funktion för att visa aktiv undermeny efter
 att användaren har muspekaren över en annan topplänk
 och sedan tar muspekaren därifrån*/
 function mouseOverOut() {
  /*Mouseover funktion för att dölja aktiv undermeny*/
  $(".nav div").mouseover(function() {
   $(".nav div.hover").toggleClass("hover");
   $(this).closest(".nav div").addClass("hover");
  });
  /*Mouseout funktion för att visa aktiv undermeny
  efter att användaren har muspekaren över en annan
  topplänk och sedan tar muspekaren därifrån*/
  $(".nav div").mouseout(function() {
   $(this).closest(".nav div").toggleClass("hover");
   $(".nav div.active").addClass("hover");
  });
 }
 /*Funktion för att markera första toppmenylänken samt lägga till active hover klass*/
 function artikelTopActive() {
  $(".nav div:first").addClass("active hover").css("background", "#d2d2d2");
 }
 /*Funktion för utförande av samtliga funktioner:
 artikelTopActive();mouseOverOut();toggleButton();focusOut();*/
 function artikelFunktioner() {
  artikelTopActive();mouseOverOut();toggleButton();focusOut();
 }
 /*Funktion för utförande av samtliga funktioner
 linkHover();toggleButton();focusOut();*/
 function startkontaktFunktioner() {
  linkHover();toggleButton();focusOut();
 }
});

.M · 1 mars

Du kanske kan kolla på att använda en router istället. Då sätter du upp regler för hur urlarna ser ut och så får du i ett funktionsanropp reda på vad som är vad.

https://github.com/wuyuntao/jquery-router

jonathanh · 1 mars

45 minuter sedan, skrev .M:

Du kanske kan kolla på att använda en router istället. Då sätter du upp regler för hur urlarna ser ut och så får du i ett funktionsanropp reda på vad som är vad.

https://github.com/wuyuntao/jquery-router

Tack för svar🙂 ska titta närmare på det och se hur jag ska implementera det på sidan. Om jag kan är inte så kunnig på Javascript/JQuery.