Question

I have the following JQuery code:

var test = new Array();

    $(".quiz_list_row").each(function(index){
            // Gets the data necessary to show game chosen
            $quiz_list_id = $(this).data("quizlistId");
            $quiz_level_reached = $(this).data("quizlevelReached");

                test.push($quiz_list_id,$quiz_level_reached);

            $(this).click(function(){
                alert("test: "+test);
            });

    });

The divs (using html5 to send data):

<div class="quiz_list_row" data-quizlist-id="1" data-quizlevel-reached="5">
    <div class="inline quiz_list_cell" id="quiz_list_cell_row0_id1">Quiz 1</div>
    <div class="inline quiz_list_cell" id="quiz_list_cell_row0_id2">Current level: 5</div>
</div>
<div class="quiz_list_row" data-quizlist-id="2" data-quizlevel-reached="7">
    <div class="inline quiz_list_cell" id="quiz_list_cell_row1_id1">Quiz 2</div>
    <div class="inline quiz_list_cell" id="quiz_list_cell_row1_id2">Current level: 7</div>
</div>

The problem is that I need to find out how to use the data in the array test when the user clicks on a specific row (I want to use $quiz_list_id and $quiz_level_reached).

Answer 1

Unless there is a specific reason you’re extracting the attributes and putting them into an array, I think you’re taking some unecessary steps to achieving what you want. Take away the complexity from this, you have access to the data attributes with the .data() method at any time you have access to the elements jQuery object, one of those times is within the click handler itself.

var quizRows = $(".quiz_list_row");

quizRows.click(function(event) {

    var self = $(this);

    //As the element clicked on has it's data attributes defined
    //You would just need to retrieve it when the element is clicked on
    var id = self.data('quizlist-id'),
        level = self.data('quizlevel-reached');

    console.log("id is " + id);
    console.log("level is " + level);
}