Call jQuery function for URL-Paths wih same folder

user_7960646 0
Viewed 696

I am currently running a jQuery script, in a .js file, and the script is getting longer and longer, with each new file added including my header.
I want to call a function for every URL opened up on my website which is in the same folder, running one function each URL is not that helpful.

My current script

$(document).ready(function(){
  if (window.location.pathname == "/DE/") {
  $(".Startseite").css("display","block");
  $(".Forum").css("display","none");
  $(".Gaming-News").css("display","none");
  $(".Clans").css("display","none");
  $(".Test").css("display","none");
  $(".About").css("display","none");
} else if (window.location.pathname == "/DE/About/") {
  $(".Startseite").css("display","none");
  $(".Forum").css("display","none");
  $(".Gaming-News").css("display","none");
  $(".Clans").css("display","none");
  $(".Test").css("display","none");
  $(".About").css("display","block");
} else if (window.location.pathname == "/DE/Gaming-News/") {
  $(".Startseite").css("display","none");
  $(".Forum").css("display","none");
  $(".Gaming-News").css("display","block");
  $(".Clans").css("display","none");
  $(".Test").css("display","none");
  $(".About").css("display","none");
} else if (window.location.pathname == "/DE/Gaming-News/ExampleFileExample.php") {
  $(".Startseite").css("display","none");
  $(".Forum").css("display","none");
  $(".Gaming-News").css("display","block");
  $(".Clans").css("display","none");
  $(".Test").css("display","none");
  $(".About").css("display","none");
} else if (window.location.pathname == "/DE/Gaming-News/FIleExample.html") {
  $(".Startseite").css("display","none");
  $(".Forum").css("display","none");
  $(".Gaming-News").css("display","block");
  $(".Clans").css("display","none");
  $(".Test").css("display","none");
  $(".About").css("display","none");
} else if (window.location.pathname == "/DE/Gaming-News/File.Example") {
  $(".Startseite").css("display","none");
  $(".Forum").css("display","none");
  $(".Gaming-News").css("display","block");
  $(".Clans").css("display","none");
  $(".Test").css("display","none");
  $(".About").css("display","none");
} else if (window.location.pathname == "/DE/Gaming-News/Artikel4/Example.file") {
  $(".Startseite").css("display","none");
  $(".Forum").css("display","none");
  $(".Gaming-News").css("display","block");
  $(".Clans").css("display","none");
  $(".Test").css("display","none");
  $(".About").css("display","none");
} else if (window.location.pathname == "/DE/Clans/") {
  $(".Startseite").css("display","none");
  $(".Forum").css("display","none");
  $(".Gaming-News").css("display","none");
  $(".Clans").css("display","block");
  $(".Test").css("display","none");
  $(".About").css("display","none");
} else if (window.location.pathname == "/DE/...") {
  $(".Startseite").css("display","none");
  $(".Forum").css("display","none");
  $(".Gaming-News").css("display","none");
  $(".Clans").css("display","none");
  $(".Test").css("display","block");
  $(".About").css("display","none");
} else {
  $(".Startseite").css("display","none");
  $(".Forum").css("display","none");
  $(".Gaming-News").css("display","none");
  $(".Clans").css("display","none");
  $(".Test").css("display","none");
  $(".About").css("display","none");
}
});

Now as you can see, each path with a file, that includes those classes, calls those functions. Can I mow this down to one function for per folder? Let's say I enter a folder and there's just an index, my header is included...blaaaa
Is there a function to call for every file in this folder? Don't know how to explain it. Now there's /DE/index.php, /DE/GN/index.php, /DE/GN/Art3.php.

Can I call one function only for the last two paths I just named, if the folder GN is in this path?

I hope everyone knows what I am talking about.

I also just put all that code in a .js file, before it was in an even larger script. But when including that with 

<script src="https://Website.online/path%20to%20file/file.js"/>

in a html or php file, the script doesn't work. And yes I put that after the by Microsoft hosted compressed js source.

html php jquery javascript
2 Answers

You can try something like this- 

    <script>
    $(document).ready(function() {

        console.log(window.location.pathname);
        var str = window.location.pathname;
        if (str.indexOf("/DE/") >= 0) {
            console.log("DE");
            $(".Startseite").css("display","block");
            $(".Forum").css("display","none");
            $(".Gaming-News").css("display","none");
            $(".Clans").css("display","none");
            $(".Test").css("display","none");
            $(".About").css("display","none");                 

            if(str.indexOf("Forum") >= 0) {
                $(".Startseite").css("display","none");
                $(".Forum").css("display","block");
            }

            if(str.indexOf("Gaming-News") >= 0) {
                $(".Startseite").css("display","none");
                $(".Gaming-News").css("display","block");
            }  

            if(str.indexOf("Clans") >= 0) {
                $(".Startseite").css("display","none");
                $(".Clans").css("display","block");
            } 

            if(str.indexOf("Test") >= 0) {
                $(".Startseite").css("display","none");
                $(".Test").css("display","block");
            } 

            if(str.indexOf("About") >= 0) {
                $(".Startseite").css("display","none");
                $(".About").css("display","block");
            }                

        }
        else if(str.indexOf("stackoverflow") >= 0) {
            console.log("so");
        }
        else {
            console.log("no");
            $(".Startseite").css("display","none");
            $(".Forum").css("display","none");
            $(".Gaming-News").css("display","none");
            $(".Clans").css("display","none");
            $(".Test").css("display","none");
            $(".About").css("display","none");                
        }

    } );

</script>
user_55188170 
<script>
    $(document).ready(function () {
        var str = window.location.pathname;
        if (str.endsWith("/DE/")) {
            $(".Startseite").css("display", "block");
            $(".Forum").css("display", "none");
            $(".Gaming-News").css("display", "none");
            $(".Clans").css("display", "none");
            $(".Test").css("display", "none");
            $(".About").css("display", "none");
        } else {
            var arrayOfClasses = ['Startseite', 'Forum', 'Gaming-News', 'Clans', 'Test', 'About'];
            myFuncToMakeAppropriateDisplays(str, arrayOfClasses);
        }
        function myFuncToMakeAppropriateDisplays(path, arrayOfClasses) {
            var path = path.split('/').filter(element => arrayOfClasses.includes(element))[0];
            $("." + path).css("display", "block");
            for (var i = 0; i < arrayOfClasses.length; i++) {
                if (path != arrayOfClasses[i]) {
                    $("." + arrayOfClasses[i]).css("display", "none");
                }
            }
        }
    });
</script>

Just add the exact class name in array named arrayOfClasses, and you will be good to go.

user_74674150
Related