jQuery - udskiftning af indhold.

Dennis Munding

unread,

Jan 24, 2013, 11:50:47 AM1/24/13

to

Hej NG,

jQuery-newbie har hårdt brug for hjælp...

Opgaven er at udskifte indhold i en <li>(1) ved klik på et <a>-tag, at
indsætte originalt indhold i første <li> ved klik på nyt <a> samt at
indsætte en audio-afspiller i hver <li> samtidig med ny tekst (2).

Scenariet er flg...

Html'en:
<code>
<ol class="musikboks">
<li>Musiknr. 1 >> <a href="#">Lyt</a></li>
<li>Musiknr. 2 >> <a href="#">Lyt</a></li>
<li>Musiknr. 3 >> <a href="#">Lyt</a></li>
<li>Musiknr. 4 >> <a href="#">Lyt</a></li>
<li>Musiknr. 5 >> <a href="#">Lyt</a></li>
<li>Musiknr. 6 >> <a href="#">Lyt</a></li>
</ol>
</code>

jQuery (indtil videre):
<code>
$(document).ready(function(){
$('ol li').click(function(){
$(this).each(function(){
var tekst = $(this)
, sang = tekst.text().split('>>');
tekst.html('Du lytter nu til...: '+sang.shift());
});
});
});
</code>

1) Ovenstående jQuery udskifter fint teksten fra <li> til "Du lytter nu
til...: Musiknr. X".
Dog bliver der indsat tekst hver gang, der klikkes på li'en, hvilket
_ikke_ er meningen.

2) Jeg overvejer stadig om jeg vil bruge html5 eller ej. Og m.h.t.
jQuery, så tænker jeg om det ville være smartest at lave en template
til audio-delen?

Så jeg har brug for hjælp til flg.:

- Sørge for at teksten kun bliver udskiftet første gang, der klikkes på
linket.

- At få den oprindelige tekst tilbage, lige så snart der klikkes på nyt
link.

- Forslag til audio-delen.

Min "visdom" i jQuery er hentet to steder:
http://codeacademy.com/

og

http://nemprogrammering.dk/

Begge steder via deres tutorials. (Har ikke gennemført alle "kurser" på
codeacademy endnu - men det kommer.) :-)

På forhånd tak for alle indspark.

Med venlig hilsen
--
Dennis Munding
a.k.a. The Eye-PG-
Proud Member of The PosseGrim Squad
"When you hear the wind, you're already dead..."

Rune Jensen

unread,

Jan 24, 2013, 5:09:11 PM1/24/13

to

On 24 Jan., 17:50, "Dennis Munding" <i...@lidmail.dk> wrote:

> - S rge for at teksten kun bliver udskiftet f rste gang, der klikkes p
> linket.

Kan det ikke gøres ved at bruge en global variabel til at styre det?

Sætte en global variabel ved body onload, og så bruge et array. Sætte
alle til False.

Når så der trykkes, så tjekkes først, om tilhørende variabel er True.
Hvis den er, så returneres. Hvis den ikke er, så skrives teksten, og
variablen sættes til True.

Næste gang rutinen kaldes, vil variablen være sat, og den vil
returnere uden at skrive noget.

Uden at kunne sige meget om dit script - jeg har brugt ovenstående i
ren javascript et par gange, men JQuery har jeg ingen idé om, hvordan
virker.

MVH
Rune Jensen

Christian Hansen

unread,

Jan 25, 2013, 3:13:57 AM1/25/13

to

On 01/24/2013 05:50 PM, Dennis Munding wrote:
> Hej NG,
>
>
> jQuery-newbie har h�rdt brug for hj�lp...
>
> Opgaven er at udskifte indhold i en<li>(1) ved klik p� et<a>-tag, at
> inds�tte originalt indhold i f�rste<li> ved klik p� nyt<a> samt at
> inds�tte en audio-afspiller i hver<li> samtidig med ny tekst (2).

>
>
> Scenariet er flg...
>
> Html'en:
> <code>
> <ol class="musikboks">

> <li>Musiknr. 1>><a href="#">Lyt</a></li>
> <li>Musiknr. 2>><a href="#">Lyt</a></li>
> <li>Musiknr. 3>><a href="#">Lyt</a></li>
> <li>Musiknr. 4>><a href="#">Lyt</a></li>
> <li>Musiknr. 5>><a href="#">Lyt</a></li>
> <li>Musiknr. 6>><a href="#">Lyt</a></li>

> </ol>
> </code>
>
>
> jQuery (indtil videre):
> <code>
> $(document).ready(function(){
> $('ol li').click(function(){
> $(this).each(function(){
> var tekst = $(this)
> , sang = tekst.text().split('>>');
> tekst.html('Du lytter nu til...: '+sang.shift());
> });
> });
> });
> </code>

Hej - pr�v noget ala f�lgende:
<code>
$(function() {
$('.musikboks li').on('click',function() {

//nulstil alle li's til oprindelig tekst
$(this).siblings().each(function(index) {
$(this).html('Musiknr. ' + ( index + 1 ) + ' >>
Lyt');
});
//find nummeret p� dette musiknummer ved at fjerne alt fra
indholdet af li-noden, som ikke er tal:
var musiknummer = $(this).text().replace(/[^0-9]/g,'');
//set html i li-noden
$(this).html('Du lytter nu til ...: Musiknr. ' + musiknummer);

});
});
</code>

Koden kan bare inds�ttes i din head-sektion p� siden. $(function() {})
er det samme som at skrive $(document).ready(function() {...

Bem�rk at jeg har indsat en span i stedet for a. da et a, som peger p� #
er d�rlig stil :)

Du kan style span-en til at have mouseover mm.

--
Christian Hansen
http://www.resource-it.dk/

Dennis Munding

unread,

Jan 25, 2013, 12:11:34 PM1/25/13

to

Christian Hansen wrote:

> $(function() {
> $('.musikboks li').on('click',function() {
>
> //nulstil alle li's til oprindelig tekst
> $(this).siblings().each(function(index) {
> $(this).html('Musiknr. ' + ( index + 1 ) + ' >>
> Lyt'); });
> //find nummeret p� dette musiknummer ved at fjerne alt fra
> indholdet af li-noden, som ikke er tal: var musiknummer =
> $(this).text().replace(/[^0-9]/g,''); //set html i li-noden
> $(this).html('Du lytter nu til ...: Musiknr. ' + musiknummer);
>
> });
> });

Hej Christian,

Det giver s� flg. ved klik p� f�rste li:

Du lytter nu til ...: Musiknr.

Musiknr. 1 >> Lyt
Musiknr. 2 >> Lyt
Musiknr. 3 >> Lyt
Musiknr. 4 >> Lyt
Musiknr. 5 >> Lyt

Men tak for indsparket... :-)

Martin Larsen

unread,

Jan 26, 2013, 5:00:43 PM1/26/13

to

Dennis Munding wrote:

> jQuery-newbie har h�rdt brug for hj�lp...

Jeg ville bruge noget ala f�lgende markup

<style>
span.dulytter { display: none }
</style>
<ol class="musikboks">
<li>Du lytter nu til Musiknr. 1

>> <a href="#">Lyt</a></li>

<li>Du lytter nu til Musiknr. 2

>> <a href="#">Lyt</a></li>

<li>Du lytter nu til Musiknr. 3

>> <a href="#">Lyt</a></li>

<li>Du lytter nu til Musiknr. 4

>> <a href="#">Lyt</a></li>

<li>Du lytter nu til Musiknr. 5

>> <a href="#">Lyt</a></li>

<li>Du lytter nu til Musiknr. 6

>> <a href="#">Lyt</a></li>
</ol>

Og f�lgende kode:

$("ol li a").click(function(){
$("span.dulytter").hide();
$(this).siblings("span.dulytter").show();
})

Dennis Munding

unread,

Jan 27, 2013, 9:34:55 AM1/27/13

to

Hej Martin,

Et godt indspark - men kke perfekt (hvilket er godt, da mine sm� gr� s�
kan komme p� arbejde... :-) ):

Jeg forst�r godt koden - dog g�r den ikke helt det �nskede, da jeg
gerne vil have fjernet ">>" + a-tagget ("Lyt"), n�r der klikkes p� det.

Men der bliver ikke indsat ekstra tekst som i min version, hvilket er
super! :-)

Nu skal jeg s� bare hitte ud af at lave en kombination af de to stumper
- s� skulle det gerne virke.

Tusind tak for sparket. :-)

Martin Larsen

unread,

Jan 27, 2013, 4:07:58 PM1/27/13

to

$("ol li a").click(function(){

$("span.dulytter").hide();

$("span.lyt").show();

$(this).closest("li").find(".dulytter").show();
$(this).closest("li").find(".lyt").hide();
})

Dennis Munding wrote:

> Jeg forst�r godt koden - dog g�r den ikke helt det �nskede, da jeg
> gerne vil have fjernet ">>" + a-tagget ("Lyt"), n�r der klikkes p� det.

Ok, s�dan forstod jeg ikke opgaven :)

Du kan da bruge f�lgende:

<li>Du lytter nu til Musiknr. 1 >> <a href="#">Lyt</a></li>
<li>Du lytter nu til Musiknr. 2 >> <a href="#">Lyt</a></li>
<li>Du lytter nu til Musiknr. 3 >> <a href="#">Lyt</a></li>
<li>Du lytter nu til Musiknr. 4 >> <a href="#">Lyt</a></li>
<li>Du lytter nu til Musiknr. 5 >> <a href="#">Lyt</a></li>
<li>Du lytter nu til Musiknr. 6 >> <a href="#">Lyt</a></li>
</ol>

$("ol li a").click(function(){

$("span.dulytter").hide();

$("span.lyt").show();

$(this).closest("li").find(".dulytter").show();
$(this).closest("li").find(".lyt").hide();
})

De to sidste linjer i funktionen kan kombineres til

$(this).closest("li").find(".dulytter").show().end().find(".lyt").hide();

Men s� er det m�ske ikke s� tydeligt hvad der sker.

I ord: G� op til den n�rmeste <li>, g� s� ned og find klassen .dulytter,
vis denne, afslut s�gningen med end() og start forfra med at s�ge efter
.lyt, og skjul denne.

Martin Larsen

unread,

Jan 28, 2013, 7:14:22 AM1/28/13

to

Der gik vist noget galt i mit indl�g, s� det kommer lige igen:

Dennis Munding

unread,

Jan 29, 2013, 11:40:00 AM1/29/13

to

Martin Larsen wrote:

> Ok, sådan forstod jeg ikke opgaven :)

Kan tænkes jeg ikke forklarede det godt nok... :-)

> Du kan da bruge følgende:

>
> <style>
> span.dulytter { display: none }
> </style>
> <ol class="musikboks">
> <li>Du lytter nu til Musiknr. 1 class="lyt"> >> <a href="#">Lyt</a></li> <li> class="dulytter">Du lytter nu til Musiknr. 2
> >> <a href="#">Lyt</a></li> <li> class="dulytter">Du lytter nu til Musiknr. 3
> >> <a href="#">Lyt</a></li> <li> class="dulytter">Du lytter nu til Musiknr. 4
> >> <a href="#">Lyt</a></li> <li> class="dulytter">Du lytter nu til Musiknr. 5
> >> <a href="#">Lyt</a></li> <li> class="dulytter">Du lytter nu til Musiknr. 6
> >> <a href="#">Lyt</a></li> </ol>
>
>
>
> $("ol li a").click(function(){
>
> $("span.dulytter").hide();
> $("span.lyt").show();
>
> $(this).closest("li").find(".dulytter").show();
> $(this).closest("li").find(".lyt").hide();
> })

Det virker fint efter hensigten...

Dog virker det ikke ideelt, hvis der skal være dynamik med i det (hen
musikliste fra db), men ved ikke om det bliver aktuelt endnu, så jeg er
ovenud tilfreds med din løsning. :-)

Vil læse videre på jQuery og se, om jeg ikke selv kan knække den sidste
nød (burde være muligt med det store sølvfad, jeg har fået foræret
her.) :-)

> De to sidste linjer i funktionen kan kombineres til
>
> $(this).closest("li").find(".dulytter").show().end().find(".lyt").hide
> ();
>

> Men så er det måske ikke så tydeligt hvad der sker.

Tror jeg for egen forståelses skyld, holder mig til to linjer. ;-)

> I ord: Gå op til den nærmeste <li>, gå så ned og find klassen
> .dulytter, vis denne, afslut søgningen med end() og start forfra med
> at søge efter .lyt, og skjul denne.

Tak for den pædagogiske udpensling. :-)