CODEWITHSUNDEEP
javascriptjqueryjsonobject
HC_
HC_

Reputation: 1050

Creating JS objects and dynamically accessing their data on click

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!

Upvotes: 0

Views: 56

Answers (1)

Jamiec
Jamiec

Reputation: 136074

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( ...

Upvotes: 1

Related Questions