Lasse >> det er utroligt svært at skulle sætte sig ind i hvordan noder virker osv - du får nok en del bedre hjælp hvis du beskrive problemet "teknisk" og ikke hvad målet er.
Men jeg går ud fra at du vil kunne markere flere felter, og afhængigt af kombinationen af disse vil du udskrive en tekst.
Jeg har lavet et lille system så du kan tilføje alle de felter og grupper du vil - den udskriver værdien i et textarea.
Du tilføjer bare felter (spans) og grupepr (divs) som du har lyst til.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
#Chicks span, #Cows span, #Horses span
{
display:block;
float:left;
border: 1px solid black;
text-align: center;
width: 5em;
line-heigth: 2em;
cursor: pointer;
}
#Cows span, #Horses span
{
border-color: red;
margin-top: 5px;
}
#Horses span
{
border-color: green;
}
#inputContainer, #Cows, #Horses
{
clear:both;
height: 1em;
}
#inputContainer
{
height: 5em;
width: 30em;
margin-top: 3em;
float:left;
}
#Cows .Active
{
background-color: red;
}
#Chicks .Active
{
background-color: blue;
}
#Horses .Active
{
background-color: green;
}
</style>
<script type="text/javascript">
var inputContainer, Container, Chick, Chicks, i, value;
/*Binder onload eventen til vinduet, køres når siden er hentet og dom er indlæst*/
window.onload = function() { init() };
/*Giver mine "knapper" en event */
function init()
{
inputContainer = document.getElementById("inputContainer");
container = document.getElementById("Container");
spans = document.getElementsByTagName("span");
addEvents(spans);
}
/* Tilføjer onclick event*/
function addEvents(objectArray)
{
for(i=0; i < objectArray.length; i++)
{
element = objectArray[i];
element.onclick = function()
{
setActive(this);
fill();
};
}
}
/* Skriver tekst i textarea */
function fill()
{
/* Finder alle spans */
var spans = document.getElementsByTagName("span");
var choosenSpans = new Array();
/* Finder de aktive, og gemmer dem i choosenSpans*/
for(i = 0; i < spans.length; i++)
{
if(hasClass(spans[i], "Active"))
{
choosenSpans.push(spans[i])
}
}
/*Skriver lidt data i textarea */
inputContainer.value = "Antal elementer: " + choosenSpans.length;
for(i = 0; i < choosenSpans.length; i++)
{
span = choosenSpans[i];
inputContainer.value += "\\n" + (i+1) + ": Title=" + span.title + ". Gruppe="+ span.parentNode.id ;
}
}
/* Sætter den valgte knappe til aktiv */
function setActive(element)
{
var parent = element.parentNode;
var spans = parent.getElementsByTagName("span");
for(i=0; i < spans.length; i++)
{
removeClass(spans[i], "Active");
}
addClass(element, "Active");
}
/* className funktioner */
function hasClass(ele,cls) {
return ele.className.match(new RegExp('(\\\\s|^)'+cls+'(\\\\s|$)'));
}
function addClass(ele,cls) {
if (!this.hasClass(ele,cls))
ele.className += " "+cls;
}
function removeClass(ele,cls) {
if (hasClass(ele,cls)) {
var reg = new RegExp('(\\\\s|^)'+cls+'(\\\\s|$)');
ele.className=ele.className.replace(reg,' ');
}
}
</script>
</head>
<body>
<div id="Chicks">
<span title="Molly">Molly</span> <span title="Yrsa">Yrsa</span>
</div>
<div id="Cows">
<span title="John">John</span> <span title="Carlsen">Carlsen</span>
</div>
<div id="Horses">
<span title="Mr. Zebra">Mr. Zebra</span> <span title="Plæt">Plæt</span>
</div>
<textarea id="inputContainer" rows="5" cols="5"></textarea>
</body>
</html>
Den tager title af de spans som værdi, og ID fra divet som gruppe, det skulle være lige til..
Du kan som sagt bare tilføje alle de spans og divs du vil.
/JJ
Indlæg senest redigeret d. 28.06.2007 22:00 af Bruger #5789