• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

[jQuery] Code-Optimierung

T

Tronjer

Senior HTML'ler
Wie lässt sich diese Funktion eleganter in jQuery schreiben? Ich extrahiere hier den URL-String und weise anschließend dem zur jeweiligen Adresse gehörenden Link eine CSS-Klasse zu. Da die Seite bei jedem Klick neu geladen wird, ist es mit einem einfachen removeClass().addClass() nicht getan. Nun gibt es in in jQuery den Selector contains(), womit ich mir wahrscheinlich indexOf() und substr() ersparen könnte, aber trotzdem wieder eine lange Abfrage erstellen muss, oder?

HTML: 
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<script type="text/javascript">

$(document).ready(function(){
    var url = window.location.href;
    var delimiter = url.indexOf('=');
    var adresse = url.substr(delimiter + 1);
    if (delimiter != -1) {
        if (adresse == 'neueste') {
            $('#produkte a').eq(0).addClass('red');
        } else if (adresse == 'action') {
            $('#produkte a').eq(1).addClass('red');
        } else if (adresse == 'adventure') {
            $('#produkte a').eq(2).addClass('red');
        } else if (adresse == 'rpg') {
            $('#produkte a').eq(3).addClass('red');
        } else if (adresse == 'sim') {
            $('#produkte a').eq(4).addClass('red');
        } else if (adresse == 'strategy') {
            $('#produkte a').eq(5).addClass('red');
        };
    };    
});
        
</script>
</head>
<body>
<h1>Produktliste</h1>
<div id="produkte">
<ul>
    <li><a href="menu4a.php?genre=neueste">Neueste</a></li>
    <li><a href="menu4a.php?genre=action">Action</a></li>
    <li><a href="menu4a.php?genre=adventure">Adventure</a></li>
    <li><a href="menu4a.php?genre=rpg">RPG</a></li>
    <li><a href="menu4a.php?genre=sim">SIM</a></li>
    <li><a href="menu4a.php?genre=strategy">Strategie</a></li>
</ul>
</div>
</body>
</html>
 
Du willst ja Get-Parameter auslesen. Dafür gibt es ein nettes Plugin für jQuery: getUrlParam | jQuery Plugins
Und ja es geht kürzer bzw. zumindest schöner.
Code: 
// Adress Teil auslesen
var genre = $(document).getUrlParam("genre");

//  erstelle dir ein Array
var genres = [
 "neueste", 
 "action",
 "adventure",
 "rpg",
 "sim",
 "strategy"
};

var num = $.inArray(genre,genres);
$('#produkte a').eq(genres[num]).addClass('red');

Aber mal so nebenbei bemerkt. Sowas macht man eigentlich macht man eigentlich serverseitig (z.B. mit PHP) ;)
 
Danke, dass Plugin schaue ich mir nachher mal an.

Ich mache es ja mit PHP. Die Tabelle, welche auf die Navigation folgt, wird aus einer Datenbank erstellt. Aus dem Grunde habe ich den Links Parameter angehängt, die mit $_Get ausgelesen werden können.
 
Ich meine aber das mit der Navigation:
PHP: 
<ul>     
<li><a href="menu4a.php?genre=neueste" class="<?php if($_GET['genre'] == "neueste") echo "red"; ?>">Neueste</a></li> 
<li><a href="menu4a.php?genre=action" class="<?php if($_GET['genre'] == "action") echo "red"; ?>" >Action</a></li>
<li><a href="menu4a.php?genre=adventure" class="<?php if($_GET['genre'] == "adventure") echo "red"; ?>" >Adventure</a></li> 
<li><a href="menu4a.php?genre=rpg" class="<?php if($_GET['genre'] == "rpg") echo "red"; ?>" >RPG</a></li> 
<li><a href="menu4a.php?genre=sim" class="<?php if($_GET['genre'] == "sim") echo "red"; ?>" >SIM</a></li>
<li><a href="menu4a.php?genre=strategy" class="<?php if($_GET['genre'] == "strategy") echo "red"; ?>" >Strategie</a></li>
 </ul>

Es sei denn du lädst Sachen über Ajax nach und willst die Menüpunkte dann auch aktiv setzen. Dann ist dein Vorgehen mit JS korrekt. :)
 
Hier DHTML über PHP zu erzeugen und sich dadurch das JS Array zu ersparen, ist natürlich auch eine Möglichkeit. Darauf wäre ich jetzt nicht gekommen. :)
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben