02. maj 2014 - 00:39 Der er 2 kommentarer og
1 løsning

JQUERY - samle 8 knapper til 1 med forskellig variabel

HEJ,

Indledningsvis: 

Jeg er netop begyndt at arbejde med JQuery, så jeg må have det ind med skeer // store skeer !

I min kode har jeg 4 knapper som alle gør det samme (flytter en scrolbar horisontalt). Den eneste forskel på disse 4 funktioner er i selve funktionkaldet, hvor tallet (det antal pixels som srolbaren skal flyttes) ændres til et større.


$(document).ready(function(){
    $("#move1").click(function() {
    $('.scroller').scrollLeft(<B>100</B>);   
    });
});

....

$(document).ready(function(){
    $("#move4").click(function() {
    $('.scroller').scrollLeft(<B>800</B>);   
    });
});

funktion 2 0g 3 er identiske bortset fra tallene (200 vs 400).

Jeg har læst et eller andet sted at det skulle være muligt at samle i EEN funktion , også med de varierende tal .

Der skal senere være op til 8 sådan funktioner, så hvis jeg kunne spare plads (og kode):

Spørgsmålene er:  1: Er det muligt ?  og 2: Hvordan ?

Kristian
Avatar billede Slater Ekspert
02. maj 2014 - 08:50 #1
Det kan sagtens lade sig gøre.

En måde er f.eks.:

$(document).ready(function(){

    $(".scroll-btn").click(function() {
        $('.scroller').scrollLeft( $(this).data('amount') );
    });

});

</script>

<button class="scroll-btn" data-amount="200">200 px</button>
<button class="scroll-btn" data-amount="400">400 px</button>


Den gør, at hver gang der bliver klikket på en af x antal knapper, der har class="scroll-btn", så læser den data-amount attributtet fra dem, og scroller den mængde.

data-attributtet er dog en HTML5 ting, og virker ikke på gamle browsere. Man kan bruge andre attributter, eller man kan kalde onclick direkte på knapperne, hvilket dog ødelægger et af jQuerys gode principper med at fuldstændigt separere HTML og script. Men dette vil virke fint for de fleste.
02. maj 2014 - 10:21 #2
Hej,

Det virker perfekt.

1000000-->  0000  tak.

Drop et svar - jeg skal på weekend i løbet af ca. 15- 20 minutter, så det bliver først søndag (?) eller mandag (?) jeg svarer på dette .. Bare til orientering.


KR
Avatar billede Slater Ekspert
02. maj 2014 - 10:39 #3
Det var godt. God weekend.
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