Sortierung mit JavaScript
Lena
- javascript
Hallo!
Ich habe eine Referenzseite erstellt, zu der man über seine Selectbox und mit JS die Sortierung ändern kann, ... "Nach Datum", "Design" ... u.s.w. Das funktioniert auch soweit gut!
Auf der Seite sind nun aber insgesamt 24 Boxen, mit den versch. Referenzen gemischt. Wenn dann z.B. "Design" auswähle" werden mit dem nachfolgenden Skript nur die relevanten angezeigt, also 2. Um das Layout zu erhalten, sollen nun die restl. 22 Boxen mit grauer Hintergundfarbe nach den ersten selektierten angezeigt werden. Wenn bei einer anderen Auswahl 15 Referenzen dazu gehören, dann eben die restl. 9 in Grau.
HTML - Selektibox:
<form name="Sortierung" action="" enctype="multipart/form-data">
<select name="SortierenNach" onchange="sortReferenzen(document.getElementById('selection').value);" id="selection">
<option value="none" selected="selected">Anzeigen nach ...</option>
<option value="date">Datum</option>
<option value="design">Design</option>
<option value="print">Printmedien</option>
<option value="digital">Digitale Medien</option>
</select>
</form>
<div id="legend">
<div id="referenz1">
<script type="text/javascript">
score['date']['referenz1'] = '2008-06-12';
score['design']['referenz1'] = 100;
score['print']['referenz1'] = 0;
score['digital']['referenz1'] = 0;
</script>
<div class="references"><a href="referenz-detail.html"><img src="images/referenz-vorschau.jpg" class="imagetip" alt="" /></a></div>
</div>
[...]
</div>
<!--
Das Script sieht so aus:
var score = new Array();
score['date'] = new Array();
score['design'] = new Array();
score['print'] = new Array();
score['digital'] = new Array();
sortOrder = new Array();
sortOrder['date'] = "desc";
sortOrder['design'] = "desc";
sortOrder['print'] = "desc";
sortOrder['digital'] = "desc";
function listSort(a, b) {
if(a['score'] == b['score']) {
if(a['name'] == b['name'])
return 0;
if(a['name'] > b['name'])
return 1;
if(a['name'] < b['name'])
return -1;
}
if(a['score'] > b['score']) {
if(a['order'] == "asc")
return 1;
else
return -1;
}
if(a['score'] < b['score']) {
if(a['order'] == "asc")
return -1;
else
return 1;
}
return 0;
}
function sortReferenzen(by) {
var displayList = new Array();
var i = 0;
for(name in score[by]) {
if (document.getElementById(name)) {
displayList[i] = new Array();
displayList[i]['name'] = name;
displayList[i]['score'] = score['date'][name];
if (score[by][name] == 0)
displayList[i]['display'] = false;
else
displayList[i]['display'] = true;
displayList[i]['order'] = sortOrder[by];
i++;
}
}
displayList.sort(listSort);
for(var index = 0; index < displayList.length; index++) {
var domNode = document.getElementById(displayList[index]['name']);
if(domNode != null) {
document.getElementById('legend').removeChild(domNode);
document.getElementById('legend').appendChild(domNode);
if(displayList[index]['display'] == true) {
domNode.style.display = "";
} else {
domNode.style.display = "none";
}
}
}
}
//-->
Gibt es eine Möglichkeit, dass obige Skript so zu ändern, dass der Default einfach nur mit grauer Hintergrundfarbe angezeigt wird?
Danke Lena