Avatar billede mik789 Nybegynder
02. maj 2003 - 17:36 Der er 39 kommentarer og
1 løsning

skifte style på nogle men ikke alle

I sp. http://www.eksperten.dk/spm/347615 blev jeg hjulpet til at finde alle elementer med en bestemt class. Ved hjælp af dette script kan man på en gang skifte egenskaber for alle elementer med denne class. Men jeg vil godt have det til at kunne lidt mere.

I første omgang forsøgte jeg med fem divs: to med class="dyr" der er blå, og tre med class="plante" der er røde. Så kan jeg ved at gå videre med dit script uden videre skifte farve på f.eks. alle med class="plante" og skifte dem tilbage igen. Nemlig med flg.:

<script type="text/javascript"><!--
function getDivsByClassName(cn) {
  temp = new Array();
  arr = document.getElementsByTagName("div");
  for (i = 0; i < arr.length; i++)
    if (arr[i].className == cn)
      temp[temp.length] = arr[i];
  return temp;
}

function changeStyle() {
divArray = getDivsByClassName("plante");
for (i=0; i<divArray.length; i++) {
  if (divArray[i].style.backgroundColor != 'green') {
  divArray[i].style.backgroundColor = 'green';
  }else{
  divArray[i].style.backgroundColor = 'red'
  }
}
}
//--></script>

Men hvis nu én af de tre divs med class="plante" i forvejen er grøn, ville jeg godt have at scriptet kunne finde ud af kun at ændre farve på de der ikke er grøn og lade den grønne blive ved at være grøn. Og tilsvarende omvendt når der skal skiftes tilbage igen: hvis en af div'erne med class="plante" er rød og kun to er grønne, skal kun de to grønne skifte tilbage. Jeg har lavet et eksempel her: www.dahr.dk/Web/getElementsByClass.html hvor jeg netop har ladet en af de tre divs med class="plante" i forvejen være grøn.
Der kan du se hvad der er galt hvis en af de tre div'er i forvejen har en forkert farve: så skifter den selvfølgelig modsat. Dvs. hvad der er grønt bliver rødt og hvad der er rødt bliver grønt. Men jeg vil godt have scriptet til kun at ændre farve på dem der har forkert farve og bevare farven på dem der har den rigtige.

//mik
Avatar billede mik789 Nybegynder
02. maj 2003 - 17:38 #1
"dit script" == phoenixv's script på sp. http://www.eksperten.dk/spm/347615
Avatar billede nikolajdu Nybegynder
02. maj 2003 - 17:40 #2
Mon det vil hjælpe at bruge hexværdierne på farvene fremfor navne.

divArray[i].style.backgroundColor != '#00ff00'
Avatar billede mik789 Nybegynder
02. maj 2003 - 17:45 #3
nikolajdu> nej det tror jeg ikke. scriptet gør jo præcis det jeg beder det om. Jeg vil godt have det til at gøre noget lidt mere komplliceret....
Avatar billede roenving Novice
02. maj 2003 - 22:58 #4
Den simple udgave, som bare gør alle grønne (eller hvad du vil have):


function changeStyle(farve) {
divArray = getDivsByClassName("plante");
for (i=0; i<divArray.length; i++) {
  divArray[i].style.backgroundColor = farve;
  }
}

Den mere udvidede, som ændrer til et eller andet alt efter om den er der eller ikke:

function changeStyle(farvegl, farveaendret, farveny) {
divArray = getDivsByClassName("plante");
for (i=0; i<divArray.length; i++) {
  if (divArray[i].style.backgroundColor != farvegl) {
  divArray[i].style.backgroundColor = farveny;
  }else{
  divArray[i].style.backgroundColor = farveaendret
  }
}
}

hth
jes
Avatar billede mik789 Nybegynder
03. maj 2003 - 08:07 #5
roenving> I forhold til mit eksempel på www.dahr.dk/Web/getElementsByClass.html hvad er så farvegl, farveaendret og faveny? Der skal jo sættes nogle konkrete farver ind for parametrene. Dit sidste script er magen til det jeg har brugt på den side (det som er givet mit sp.), bort set fra at du lægger farverne op som parametre og så kalkulerer med tre (og ikke bare to) muligheder. Men hvad er egentlig den tredje mulighed?
Avatar billede mik789 Nybegynder
03. maj 2003 - 09:33 #6
OK gutter, nu har jeg gjort det enkelt og lavet tre funktioner: én der gør alle div'er med class="plante" grønne, én der skifter farve på én af div'erne med class="plante", og én der gør alle div'er med class="plante" røde. Sådan:

function makeGreen() {
divArray = getDivsByClassName("plante");
for (i=0; i<divArray.length; i++) divArray[i].style.backgroundColor = 'green';
}

function makeRed() {
divArray = getDivsByClassName("plante");
for (i=0; i<divArray.length; i++) divArray[i].style.backgroundColor = 'red';
}

function changeOne() {
if (document.getElementById("skifter").style.backgroundColor == 'green') {
  document.getElementById("skifter").style.backgroundColor = 'red';
  }else{
  document.getElementById("skifter").style.backgroundColor = 'green';
  }
}

I kan stadig se og prøve på wwww.dahr.dk/Web/getElementsByClass.html

Det der nu er poinen, er at lave en funktion der 1) uanset hvilken farve den midterste "plante" har, kan gøre alle "planter" grønne, og 2) uanset hvilken farve den midterste "plante" har fået i mellemtiden, kan skifte dem alle tilbage til rød. Funktionen skal kaldes fra ét link som f.eks.:

<a href="java script:skiftFarve();">Gør alle planter grønne eller gør alle planter røde</a> Derudover bevarer man funktionen changeOne() der skifter farve på den midterste "plante". Pointene forhøjes til 100
Avatar billede mik789 Nybegynder
03. maj 2003 - 09:38 #7
hov der var et w for meget. altså: www.dahr.dk/Web/getElementsByClass.html
Avatar billede Slettet bruger
03. maj 2003 - 11:48 #8
Jeg forstår slet ikke problemet. Hvis du vil gøre alle planter grønne, burde dette gøre tricket:

divArray = getDivsByClassName("plante");
for (i = 0; i < divArray.length; i++)
  divArray[i].style.backgroundColor = "green";

Og selvfølgelig det samme med rød.
Hvis der så viser sig at være en plante, der er grøn, vil dennes farve jo ikke skifte.

Har jeg totalt misforstået spørgsmålet (jeg tror det!)? :)
Avatar billede roenving Novice
03. maj 2003 - 12:45 #9
>>mik

function changeStyle(farve) {
divArray = getDivsByClassName("plante");
for (i=0; i<divArray.length; i++) {
  divArray[i].style.backgroundColor = farve;
  }
}

gør alle "plante"r farve, dvs. du kalder den med
changeStyle('green'),
når de skal være grønne;

og med

changeStyle('red'),
når de skal være røde.

mvh
jes
Avatar billede mik789 Nybegynder
03. maj 2003 - 16:07 #10
phoenixv> problemet er at den samme funktion skal BÅDE gøre alle planter grønne (selv om én i forvejen er grøn) OG gøre alle planter røde igen (selv om en måske er gjort grøn i mellemtiden). Din funktion (og roenving's) - som er den samme som mine på siden nu (se min kommentar 03/05-2003 09:33:22 oven for) gør ENTEN alle planter grønne ELLER alle planter røde (eller hvilken farve man nu vælger), men kan ikke skifte tilbage igen hvis én er anderledes.
Avatar billede roenving Novice
03. maj 2003 - 16:12 #11
Skal de skifte modsat?

Eller ønsker du at det skal opføre sig anderledes, hvis een har en anden farve?

jes
Avatar billede mik789 Nybegynder
03. maj 2003 - 16:12 #12
- og funktionen skal kunne virke fra det samme kald. dvs. det dur ikke med changeStyle('green') eller tilsvarende som roenving foreslår, for så er man nødt til at vide hvilken farve boksene har. Det skal scriptet selv tage højde for.
Avatar billede mik789 Nybegynder
03. maj 2003 - 16:15 #13
roenving> ja de skal kunne skifte begge veje ved klik på det samme link. Min funktion fra før:

function changeStyle() {
divArray = getDivsByClassName("plante");
for (i=0; i<divArray.length; i++) {
  if (divArray[i].style.backgroundColor != 'green') {
  divArray[i].style.backgroundColor = 'green';
  }else{
  divArray[i].style.backgroundColor = 'red'
  }
}
}

- gør netop det, men kun hvis ALLE har den samme farve. Jeg vil have at selv om én er ændret så skal der alligevel kunne skiftes frem og tilbage ved ét klik. Forstår I?
Avatar billede Slettet bruger
03. maj 2003 - 16:16 #14
Scriptet skal både skifte frem og tilbage på én gang?
Avatar billede Slettet bruger
03. maj 2003 - 16:17 #15
Ok, nu forstår jeg vist. Scriptet skal kunne vha. en funktion skifte først til grøn og så tilbage til rød, eller hvad? Og dem, der allerede er den farve, skal overhovedet ikke berøres af scriptet?
Avatar billede Slettet bruger
03. maj 2003 - 16:18 #16
Så er det vist nemmest at give disse "outsidere" en class for sig selv.
Avatar billede mik789 Nybegynder
03. maj 2003 - 16:20 #17
phoenixv> OK ikke på én gang, men ved klik på det samme link. F.eks. kan jeg bruge min funktion fra min sidste kommentar (16:15:54) sådan:

<a href="java script:changeStyle();">Gør alle grønne eller gør alle røde</a>

Men hvis én af de tre røde er blevet ændret til grøn vil den skifte til rød mens de to røde bliver grønne. Scriptet skifter bare til den modsatte farve. Jeg vil have at selv om én farve er modsat så skiftes der alligevel så alle bliver grønne - og tilbage igen til rød.
Avatar billede Slettet bruger
03. maj 2003 - 16:23 #18
Ja, det forstår jeg godt. Men som sagt ville det være klart nemmest, hvis du bare gav de modsatte en anden class.
Avatar billede roenving Novice
03. maj 2003 - 16:24 #19
Altså så det bliver modsat af de fleste?
Avatar billede mik789 Nybegynder
03. maj 2003 - 16:25 #20
phoenxv> Jep, det er det det skal. Men jeg kan ikke vide hvilken boks der er ændret, så jeg kan ikke give dem en særlig klasse. Det med farverne er bare et eksempel. I praksis drejer det sig om et forum hvor meddelelserne kun angives med navn og tid for indlægget. Så skal man kunne klikke på en enkelt meddelelse og få den vist i en boks under linjen men navn osv. Men mamn skal også kunne få vist ALLE meddelelser - også selv om én eller to måske allerede er blevet lukket - og på samme måde skal man kunne lukke alle meddelelser selv om nogle enkelte er åbnet. Her har man brug for mindst to funktioner: én der åbner enkelte meddelelser og én der åbner eller lukker alle. Spørgsmålet er om det overhovedet kan lade sig gøre eller om man er nødt til at have én funktion til at åbne alle og én til at lukke alle - det er jo nemt nok. Her drejer det sig ikke om farver men om display='block' eller display='none'
Avatar billede Slettet bruger
03. maj 2003 - 16:26 #21
Du kan jo snyde lidt og i funktionen changeOne give elementet et andet className. Så bliver det jo ikke berørt.
Avatar billede mik789 Nybegynder
03. maj 2003 - 16:27 #22
Hov det var noget vrøvl. Læs: Men mamn skal også kunne få vist ALLE meddelelser - også selv om én eller to måske allerede er blevet ÅBNET - og på samme måde skal man kunne lukke alle meddelelser selv om nogle enkelte allerede er LUKKET
Avatar billede Slettet bruger
03. maj 2003 - 16:28 #23
Nu blev jeg forvirret igen (undskyld). Skal man med ét link kunne skiftevis åbne og lukke alle meddelelser?
Avatar billede mik789 Nybegynder
03. maj 2003 - 16:29 #24
phoenixv> jamen jeg ved ikke hvilken boks der er ændret. I princippet kan det være hvilkensomhelst af de tre "planter" i farveeksemplet.
Avatar billede mik789 Nybegynder
03. maj 2003 - 16:29 #25
phoenixv> ja man skal med ét link skiftevis kunne åbne og lukke alle meddelelser - også selv om ENELTE af dem i forvejen er hhv åbnet/lukket
Avatar billede roenving Novice
03. maj 2003 - 16:34 #26
Så skal du have en global variabel, altså en variabel *uden for* dine funktion, som du kan teste på, à la:

<script la...>
var luk = false

function change....
  if (luk) {
    //luk dem
  } else {
    //åbn dem
}

hth
jes
Avatar billede mik789 Nybegynder
03. maj 2003 - 16:34 #27
Egentlig tror jeg slet ikke det kan lade sig gøre at samle begge veje (åbne og lukke) i ét link, når nogle enkelte meddelelser kan være åbnet/lukket. Så jeg er sådan set indstillet på at lave det i to links: "Åbn alle meddelelser" og "Luk alle meddelelser". Men man skal jo aldrig sige aldrig, og hvis nogle af jer har ideen til hvordan det evt. alligevel kunne lade sig gøre, synes jeg det ville være en mere elegant løsning.
Avatar billede mik789 Nybegynder
03. maj 2003 - 16:38 #28
roenving> er vist ikke helt med...? Hvordan skal jeg definere var luk?
Avatar billede roenving Novice
03. maj 2003 - 16:45 #29
Undskyld, jeg fik ikke skrevet:

var luk = false

function change....
  if (luk) {
    luk = false;
    //luk dem
  } else {
    luk = true;
    //åbn dem
}
Avatar billede roenving Novice
03. maj 2003 - 16:47 #30
-- skifter den hele tiden imellem at være sand og falsk, og du kan lade din knap gå skiftevis den ene vej og den anden vej.

jes
Avatar billede mik789 Nybegynder
03. maj 2003 - 16:48 #31
roenving> OK, det prøver jeg at gå videre med - men kan ikke lige nu se hvor dan det skal hænge sammen med min funtion changeStyel()
Avatar billede roenving Novice
03. maj 2003 - 16:55 #32
Sådan:

var luk = false

function changeStyle() {
divArray = getDivsByClassName("plante");
if (luk) {
  colornew = 'green';
}else{
  colornew = 'red';
}
for (i=0; i<divArray.length; i++) {
  divArray[i].style.backgroundColor = colonew;
}
}

hth
jes
Avatar billede roenving Novice
03. maj 2003 - 16:56 #33
Og glemte lige at toggle luk:

var luk = false

function changeStyle() {
divArray = getDivsByClassName("plante");
if (luk) {
  luk = false;
  colornew = 'green';
}else{
  luk = true;
  colornew = 'red';
}
for (i=0; i<divArray.length; i++) {
  divArray[i].style.backgroundColor = colonew;
}
}
Avatar billede Slettet bruger
03. maj 2003 - 16:57 #34
Ulempen ved roenvings forslag er jo, at hvis man enkeltvis har åbnet alle meddelelser, giver det ingen effekt at trykke på "åbn"-linket. For jeg tænkte også på den løsning.
Avatar billede roenving Novice
03. maj 2003 - 17:00 #35
Jeps, det vil kræve en hel del mere at kunne det, så det har jeg ikke tænkt på her.

I øvrigt kunne man med ovenstående løsning også skifte teksten på knappen -- og så ville det give mening.

mvh
jes
Avatar billede mik789 Nybegynder
04. maj 2003 - 10:06 #36
roenving>&phoenixv> ja, det kan jeg se. Det er rigtigt at det virker sådan set efter hensigten bort set det tilfælde hvor alle meddelelser er blevet åbnet elller lukket enkeltvis... I kan selv prøve med mit farveeksempel som nu er opdateret: www.dahr.dk/Web/getElementsByClass.html

Tak i alle fald.
phoenixv> læg også du et svar, så fordeler jeg point med 75 til roenving og 25 til dig.
Avatar billede Slettet bruger
04. maj 2003 - 11:46 #37
Nej tak. Men jeg synes helt klart, du skal lave to separate knapper, en "Åbn alle" og en "Luk alle". Det andet er bare et irritationsmoment.
Avatar billede mik789 Nybegynder
04. maj 2003 - 12:11 #38
phoenixv> jeg kan godt se problemet, men hvis der er mange indlæg vil det være sjældent at alle er blevet åbnet eller lukket enkeltvis
Avatar billede roenving Novice
04. maj 2003 - 14:46 #39
Takker for points ;~}

-- vend tilbage, hvis du får en god ide!
Avatar billede Slettet bruger
04. maj 2003 - 15:08 #40
Alligevel er det nemmest med en af hver slags knap. For selv hvis man bare har åbnet tre meddelelser, skal man jo trykke to gange for at lukke dem alle igen. Og det er uhensigtsmæssigt, når det kunne gøres med ét klik!
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester