Avatar billede ssv Nybegynder
19. august 2009 - 21:27 Der er 6 kommentarer og
1 løsning

Hjælp til funktioner i jQuery

Hej.

Jeg har siddet og rodet med jQuery i et stykke tid nu, men det har kun været småting. Jeg vil nu prøve at komme videre med det, og her kommer funktioner ind i billedet.

Jeg har sat en lille test op:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Titel</title>
<style type="text/css">
body { font: 11px/20px Verdana, Arial, Helvetica, sans-serif; }
.clm { width: 200px; float: left; }
#counter { font: 30px Georgia, "Times New Roman", Times, serif; color: #666; margin: 5px 0 0; }
a { color: #06C; }
</style>

<script type="text/javascript" src="http://www.google.com/jsapi"></script><script type="text/javascript">google.load("jquery", "1.3.2");</script>
<script type="text/javascript">
$(function(){
    function getVal(){
        // tja, hvad skal være her?
    };
});
</script>
</head>

<body>
<div class="clm">
    <ul>
        <li><a href="java script:void(0);" onClick="getVal('1')">Val #1</a></li>
        <li><a href="java script:void(0);" onClick="getVal('10')">Val #10</a></li>
        <li><a href="java script:void(0);" onClick="getVal('100')">Val #100</a></li>
        <li><a href="java script:void(0);" onClick="getVal('1000')">Val #1000</a></li>
    </ul>
</div>

<div class="clm">
    <div id="counter">1</div>
</div>
</body>
</html>


Hvordan skal funktionen se ud der henter værdien fra hvert enkelt anchor tag? Jeg vil også meget gerne læse mere om det, så i må også gerne smide et link til hvor jeg kan læse lidt på det.

Jeg er nybegynder indenfor javascript, så alt skal gerne forklares ;-)

På forhånd tak.
Avatar billede softspot Forsker
20. august 2009 - 08:49 #1
Skal der ikke ske noget med værdien af hvert anchortag?

jeg har lavet et lille eksempel som opsamler hver værdi og viser dem i en alert:

<script type="text/javascript">
$(function(){
  var txt = "";
  $("a").each(function(idx) {
    txt += $(this).val() + "\n";
  });
  alert(txt);
});
</script>

Du kan finde mere om jQuery og links til andre resurser på http://docs.jquery.com/Main_Page

jeg har desuden selv haft glæde af bogen "Learning jQuery" som er skrevet af en af jQuery-folkene fra indercirklen, Karl Swedberg (ISBN: 978-1-847192-50-9).
Avatar billede softspot Forsker
20. august 2009 - 09:08 #2
OK, efter lidt test kan jeg se at mit foreslag ikke var særlig gennemtænkt, så jeg prøver lige igen.

<script type="text/javascript">
$(function(){
  var txt = "";

  // gennemløb alle a-elementer og kald den anonyme funktioner
  // for hvert element.
  $.each($("a"), function(idx, val) {
    // omdan val (som er det aktuelle a-element der itereres)
    // til et jQuery-objekt og hent html (svarende til intterHTML)
    // fra dette element. html opsamles i en variabel til senere
    // visning i en alert.
    txt += $(val).html() + "\n";
  });
  alert(txt);
});
</script>

Som du vil se, når du får kigget på jQuery, så er $-funktionen central i jQuery, ligesom måden elementer findes i DOM er. Udvælgelsen sker via selectors (det der hedder "a" i eksemplet), som læner sig kraftigt op ad CSS-syntaksen for udvælgelse af elementer, dog med nogle udvidelser ifht. XPath-agtig syntaks.
Avatar billede ssv Nybegynder
21. august 2009 - 10:06 #3
Hej softspot, og tak for dit svar.

Dit eksempel er fint, men det er ikke helt det jeg er ude efter. Lad mig se sætte det i et andet sammenhæng (dette er en hurtigt sammenbrygget kode, der selvfølgelig ikke virker helt efter hensigten):

<script type="text/javascript">
$(function(){
    function getAddress(){
    address = $('a').attr("href");
    $('#map').attr("src", "http://www.map-generator.net/extmap.php?address="+ adress +"&amp;width=300&amp;height=200&amp;maptype=map&amp;zoom=16&amp;hl=en");
       
    };
});
</script>

Til at kalde "address" har jeg så nogle anchor tags med en værdi:
<ul>
<li><a href="java script:getAddress('Loremvej 12, 9000 Aalborg, Danmark');">Lokation #1</a></li>
<li><a href="java script:getAddress('Septugade 250, 9000 Aalborg, Danmark');">Lokation #2</a></li>
</ul>

Jeg skal så hente værdien (adressen) fra anchor tag'et ind i scriptet - og det er denne funktion jeg har svært ved.
Avatar billede softspot Forsker
21. august 2009 - 11:44 #4
Jeg er ikke helt sikker på at jeg er med på hvad du vil, for det ser ikke ud til at du rent faktisk har brug for at finde nogle anchortags i din funktion, da du jo sender en adresse med til funktionen som parameter.

Du kan udforme og kalde funktionen således (bemærk de ekstra parametre i funktionens definition):

<script type="text/javascript">
function getAddress(obj, address) {
  $('#map')
    .attr(
      "src",
      "http://www.map-generator.net/extmap.php?address=" +
        address +
        "&width=300&height=200" +
        "&maptype=map" +
        "&zoom=16&hl=en"
    );
}
</script>


<ul>
  <li>
    <a href="#" onclick="getAddress(this,'Loremvej 12, 9000 Aalborg, Danmark');">
      Lokation #1</a>
  </li>
  <li>
    <a href="#" onclick="getAddress(this,'Septugade 250, 9000 Aalborg, Danmark');">
      Lokation #2</a>
  </li>
</ul>

Som jeg ser det, har du slet ikke brug for at kalde jQuery.ready (dvs. $(...)), da du blot skal have defineret en funktion som kan kaldes ved klik på linket. Derfor har jeg droppet den i mit eksempel.
Avatar billede ssv Nybegynder
21. august 2009 - 21:07 #5
Det virker jo perfekt. Tak for det :-)

Smid et svar så vi kan få afregnet point. Jeg har selv Learning jQuery, men jeg er kun lige gået i gang med den. Glæder mig til at komme igennem den, jeg har store forventninger til den.
Avatar billede softspot Forsker
21. august 2009 - 21:13 #6
Jeg synes i det mindste Learning jQuery har været lærerig, men det kan da godt være at et grundlæggende kendskab til javascript er en forudsætning for at komme igang.

Velbekomme :-)
Avatar billede softspot Forsker
21. august 2009 - 22:02 #7
Tak for point :-)
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