Søg
Avatar billede cronick Nybegynder
06. juli 2007 - 23:27 Der er 7 kommentarer og
1 løsning

tælle elementer og checke dem

Hej,

Jeg har en funktion, som gør div'en usynlig når man trykker på dets link. Samtidig vil jeg godt have lagt en sluttekst ind i en anden div, når alle div's er blevet usynlige.

Indtil videre har jeg følgende kode:

function remove_link( id ) {
var plus_id = id + 1;
if(document.getElementById('link'+plus_id)) {
  document.getElementById('link'+id).style.display = 'none';
}else{
  document.getElementById('link'+id).style.display = 'none';
  document.getElementById('before_links').innerHTML = 'Sluttekst..';
  document.getElementById('before_links').style.display = 'block';
}
}

Problemet er, at den viser slutteksten, hvis man trykker på det sidste link (f.eks. div'en med id "link21" hvis der nu er 21 div's i alt). I stedet skal der nok laves noget, som tæller divsne (f.eks. de 21), og hvis den finder ud af, at alle er usynlige, skal den returnere denne slutbesked i det andet div.

Nogen der kan komme frem med en løsning til dette?

- På forhånd tak!
Avatar billede roenving Novice
07. juli 2007 - 06:53 #1
Hvordan kalder du, og hvorfra ?o]

-- for der skal sikkert også noget check, hvis der trykkes igen (eller har du også en ting, der kan vise igen ?-)
Avatar billede cronick Nybegynder
07. juli 2007 - 13:09 #2
De bliver simpelthen opstillet ved start. Lign dette:

<div id="before_links" style="display: none;"></div>

<div id="link1" onClick="remove_link(1);">...</div>
<div id="link2" onClick="remove_link(2);">...</div>
<div id="link3" onClick="remove_link(3);">...</div>
<div id="link4" onClick="remove_link(4);">...</div>
<div id="link5" onClick="remove_link(5);">...</div>

Så vil jeg gerne have, at når man bruger funktionen (remove_link) på den sidste der er tilbage (hvis display altså ikke er blevet sat til "none" endnu), skal den efterfølgende gå ind og sætte det selvstændige div's (before_links) display til "block", og tilføje lidt tekst i den (sluttekst).. :)
Avatar billede crazysnap Seniormester
09. juli 2007 - 12:09 #3
Hej cronick,


Så kan du jo tælle (som du selv foreslår) hvor mange link divs der er når siden loades, f.eks noget lignende:



<html xmlns="http://www.w3.org/TR/html401">
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
        <script type="text/JavaScript">
        var divs;
       
        function initRemoveLink()
        {
            divs = 0;
            var allDivs = document.getElementsByTagName("div");
           
            for(var i = 0; i < allDivs.length; i++)
                if(allDivs[i].id.length > 4 && allDivs[i].id.substring(0, 4) == "link" && allDivs[i].style.display != 'none')
                    divs++;
         
            if(divs == 0)
                showText();
        }
       
        function remove_link( id )
        {
            document.getElementById('link'+id).style.display = 'none';
           
            if(divs > 1)
                divs--;
            else
                showText();
        }
       
        function showText()
        {
            document.getElementById('before_links').innerHTML = 'Sluttekst..';
            document.getElementById('before_links').style.display = 'block';
        }

        </script>
    </head>
    <body onload="initRemoveLink();">
        <div id="before_links" style="display: none;"></div>

        <div id="link1" onClick="remove_link(1);" style="cursor: pointer;">...</div>
        <div id="link2" onClick="remove_link(2);" style="cursor: pointer;">...</div>
        <div id="link3" onClick="remove_link(3);" style="cursor: pointer;">...</div>
        <div id="link4" onClick="remove_link(4);" style="cursor: pointer;">...</div>
        <div id="link5" onClick="remove_link(5);" style="cursor: pointer;">...</div>
    </body>
</html>



Mvh.

- Snap :)
Avatar billede crazysnap Seniormester
09. juli 2007 - 12:13 #4
Hov og hvis du ændrer remove_link( id ) metoden til:


function remove_link( elm )
{
  elm.style.display = 'none';
           
  if(divs > 1)
      divs--;
  else
      showText();
}


slipper du for at kaste det individuelle link nr med til remove_link metoden og i stedet bare elementet selv, altså:


<div id="link1" onClick="remove_link(this);" style="cursor: pointer;">...</div>


i stedet for:


<div id="link1" onClick="remove_link(1);" style="cursor: pointer;">...</div>



Mvh.

- Snap :)
Avatar billede cronick Nybegynder
09. juli 2007 - 17:07 #5
Det virker umiddelbart som det skal.. :) Eneste problem er bare, at div'en ikke forsvinder, men kun linket. Ved godt jeg selv havde skrevet at onClick var placeret på div'en (af uviste grunde), men den er i virkeligheden placeret på et link, inde i diven. Derfor forsvinder div'en selvfølgelig ikke, men kun linket. Er det muligt at ændre på koden, så det i stedet er div'en der forsvinder, samtidig med, at der stadig bruges onClick="..(this);" ?
Avatar billede crazysnap Seniormester
09. juli 2007 - 18:41 #6
Det kan man sagtens. Har tilføjet en ekstra metode der finder den første div uden om et link og ændret lidt i remove_link metoden igen:



<html xmlns="http://www.w3.org/TR/html401">
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
        <script type="text/JavaScript">
        var divs;
       
        function initRemoveLink()
        {
            divs = 0;
            var allDivs = document.getElementsByTagName("div");
           
            for(var i = 0; i < allDivs.length; i++)
                if(allDivs[i].id.length > 4 && allDivs[i].id.substring(0, 4) == "link" && allDivs[i].style.display != 'none')
                    divs++;
         
            if(divs == 0)
                showText();
        }
       
        function remove_link( elm )
        {
            var tmp = getDiv(elm);
           
            if(tmp != null)
                tmp.style.display = 'none';
           
            if(divs > 1)
                divs--;
            else
                showText();
        }
       
        function showText()
        {
            document.getElementById('before_links').innerHTML = 'Sluttekst..';
            document.getElementById('before_links').style.display = 'block';
        }
       
        function getDiv(elm)
        {
            var tmp = elm;
            while(tmp != null && tmp.tagName.toLowerCase() != "div")
                tmp = tmp.parentNode;
           
            return tmp;
        }

        </script>
    </head>
    <body onload="initRemoveLink();">
        <div id="before_links" style="display: none;"></div>

        <div id="link1" style="cursor: pointer;"><a href="#" onClick="remove_link(this);" >...</a></div>
        <div id="link2" style="cursor: pointer;"><a href="#" onClick="remove_link(this);" >...</a></div>
        <div id="link3" style="cursor: pointer;"><a href="#" onClick="remove_link(this);" >...</a></div>
        <div id="link4" style="cursor: pointer;"><a href="#" onClick="remove_link(this);" >...</a></div>
        <div id="link5" style="cursor: pointer;"><a href="#" onClick="remove_link(this);" >...</a></div>
    </body>
</html>


Mvh.

- Snap :)
Avatar billede cronick Nybegynder
09. juli 2007 - 23:49 #7
Det virker bare perfekt. Mange tak Snap.. Smid endelig et svar.. ;)
Avatar billede crazysnap Seniormester
10. juli 2007 - 09:18 #8
Det Lyder godt! :)


Der kommer et svar her...


Mvh.

- Snap :)
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
Webudvikling kurser
Vi tilbyder markedets bedste kurser inden for webudvikling
Se alle Webudvikling kurser

Flere spørgsmål fra JavaScript kategorien

Titel Indlæg Oprettet Seneste aktivitet
problem med download i <a href=" " download> tag i JavaScript Af Peer i JavaScript 5 27/04/202620:09 03/05/202613:59
Validering af filnavn i formular Af Strawberry i JavaScript 8 14/04/202610:11 20/04/202611:14
Mangler et JavaScript til htm side med iframe i Joomla5 Af Peder Lund Nielsen i JavaScript 2 03/02/202614:19 04/04/202616:02
Åbne en PDF fil fra en mappe Af mbl i JavaScript 9 18/04/202516:52 22/04/202512:33
Spørgsmål til cookies Af Mads i JavaScript 2 14/02/202511:47 27/06/202514:34
Se alle spørgsmål i kategorien Opret spørgsmål

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.

Opret Log ind

Du kan også logge ind via nedenstående tjenester

Alle kategorier på Eksperten
Seneste spørgsmål Seneste aktivitet
07/0514:15 PHP Html Af Asky i Programmeringsværktøjer
07/0511:06 Rufus mange muligheder - valg ved install Windows Af Uvanga i Windows
06/0516:53 HTML Af Asky i Programmeringsværktøjer
06/0510:01 Mister internettet efter slumre, Af valby i Windows
05/0513:02 Lille smart tingest Af nu_igen i Fitness & Smartwatches
White papers
Flere white papers »