Creating JS objects and dynamically accessing their data on click

Question

I am creating a series of horizontally sliding menus. A brief overview: you have items A,B,C,D,E, and the menu only shows BCD. Press <- to change view to ABC, or press -> to change view to CDE, etc. The item count is variable, so some will be ABCD, some might be ABCDEF.

I figured creating objects would be better than hard-coding these individually.

Here is my code:

function Slider(uniqueName, subtitles, icons, descripts, links){
    var thisSlider = '#'+uniqueName; //in this example uniqueName = 'mbp'
    $(thisSlider).html('<div class="sliderContainer" id="'+uniqueName+'">\
            <div class="sliderArrowContainer">\
                <a href="javascript:void(0);" id="matSliderLeft"><img class="sliderLeft" id="'+uniqueName+'Left" src="../images/misc/lArrowGrey.png"></a>\
            </div>\
            <div class="sliderBlock">\
                <div class="sliderIconHolder"><img class="sliderImg" src="../images/misc/'+icons[0]+'"></div>\
                <div class="sliderSubtitle">'+subtitles[0]+'</div>\
                <div class="sliderText">'+descripts[0]+'</div>\
            </div>\
            <div class="sliderBlock">\
                <div class="sliderIconHolder"><img class="sliderImg" src="../images/misc/'+icons[1]+'"></div>\
                <div class="sliderSubtitle">'+subtitles[1]+'</div>\
                <div class="sliderText">'+descripts[1]+'</div>\
            </div>\
            <div class="sliderBlock">\
                <div class="sliderIconHolder"><img class="sliderImg" src="../images/misc/'+icons[2]+'"></div>\
                <div class="sliderSubtitle">'+subtitles[2]+'</div>\
                <div class="sliderText">'+descripts[2]+'</div>\
            </div>\
            <div class="sliderArrowContainer">\
                <a href="javascript:void(0);" id="matSliderRight"><img id="'+uniqueName+'Right" src="../images/misc/rArrowGreen.png"></a>\
            </div>\
        </div>');
    $(uniqueName).data( { subtitles: [subtitles], icons: [icons], descripts: [descripts], links:[links] } );

}


$(".sliderLeft").live("click", function() {
    var cur = this.id;
    cur = cur.substr(0,3); //this is bc all var uniqueNames are 3char, in this case it is 'mbp'
    var tempData = $('#'+cur).data(subtitles[0]);
    alert(tempData); //this alerts undefined
});

My alert at the end alerts undefined. Obviously something in my syntax is very wrong, but I'm also wondering if my approach in general is wrong? The vars passed into Slider(); are arrays (aside from uniqueName), so I'm trying to store the arrays using jQuery .data(); into the main container.

Any help on how to store multiple arrays being passed to Slider(); into .sliderContainer, and then accessing it by obtaining the .sliderContainer's ID by clicking on different parts... would be very helpful.

(Should I be using JSON?)

Thank you!

Jamiec · Accepted Answer · 2014-03-10 22:06:47Z

1

I'm pretty sure what you want to do is:

var tempData = $('#'+cur).data('subtitles')[0];

You're accessing the data property subtitles which you know to be an array, and you want the first element. The above code does none of the checking and validation that it should.

Also, this bit:

$(uniqueName).data( ...

You should have used thisSlider as the unique name does not include the hash. Change to

$(thisSlider).data( ...

edited Mar 10, 2014 at 22:06

answered Mar 10, 2014 at 21:40

Jamiec

136k15 gold badges142 silver badges202 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

HC_ Over a year ago

This still doesn't work -- Uncaught TypeError: Cannot read property '0' of undefined. Thank you, though.

HC_ Over a year ago

Looks like there may be a problem where I'm assigning data, will look into it -- your syntax has helped me in alerting test data in the console :)

Jamiec Over a year ago

@HC_ - if you create a jsfiddle.net of what you're trying to do then its easier to guide you in the right direction on a better approach

HC_ Over a year ago

So your syntax correction was half the mistake, the other half was missing a '#' in the data assignment @__________@ thank you for your help!

Collectives™ on Stack Overflow

Creating JS objects and dynamically accessing their data on click

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related