how to loop trough a array inside an object in JQuery

Question

I would like to get some help in a problem I hit when I want to DRY

I want to toggle a <p> to be shown or be hidden when I hit a <a> I have about 15 of them that needs to be shown or hidden at the time a visitor want to read the text. I got it to work for a single object and can copy it and got the whole page to work as it should. However now I would like to loop the code and get every link and every text field where it should be. this is what I have so far but I got stuck dont know where to turn is there anyone out there that might help me?

this is how it looked in original without the loop:

$( "#designhemsidalink" ).click(function( event ){
    "use strict";
    event.preventDefault();
    $( "#designhemsida" ).toggle( "slow" );

    });

And this is the loop I trying right now:

var services = {
            lank: ['#designhemsidalink', '#designwebbutiklink'],
            text: ['#designhemsida', '#designwebbutik']

    };
    $.each(services, function(){
$( this.lank ).click(function( event ){

    event.preventDefault();
    $( this.text ).toggle( "slow" );

    });
    });

Any input would be helpfull

Sonny

Answer 1 · 2015-12-23T06:32:28Z

December 23, 2015 6:32am

What about something like this:

var services = {
            lank: ['#designhemsidalink', '#designwebbutiklink'],
            text: ['#designhemsida', '#designwebbutik']
};

for ( var i = 0; i < services.lank.length; i++ ) {
    $( services.lank[i] ).click(function( event ){
        event.preventDefault();
        $( services.text[i] ).toggle( 'slow' );
    });
}

Welcome to the Treehouse Community

Looking to learn something new?

Sonny Österlund

Sonny Österlund

how to loop trough a array inside an object in JQuery

1 Answer

Samuel Webb

Samuel Webb

Sonny Österlund

Sonny Österlund

Samuel Webb

Samuel Webb