无法遍历数组，避免添加ID

Question

Looking to:

Have the data for each of the 56 people show up in a popup window/ "tooltip" when you click on the image of their face (see index.html ) without having to use ids. For example, clicking on Allan's image should give you her data stored in var MLA tried using a for loop to little success, maybe .each()

There are two MLAs here in the example, scripts.js , but there are actually a total of 56 items that I'm trying to iterate over. Right, now I'm getting the last person in the array.

scripts.js (Data, attempted for loop)

    // MLAs
         var MLAs = [
           {
             "Name": "Nancy Allan",
             "Age": 62,
             "Constuency": "St. Vital",
             "Party": "NDP",
             "Gender": "Female",
             "Ethnicity": "White"
           },
           {
             "Name": "James Allum",
             "Age": null,
             "Constuency": "Fort Garry-Riverview",
             "Party": "NDP",
             "Gender": "Male",
             "Ethnicity": "White"
           }]

     // Shows a popup with MLA information
     $(".headshot").click(function(){
          $(".tooltip").css("display", "block");
          for (i = 0; i < 56; i++) {
              $(".tooltipName").html(MLAs[i].Name);
              $(".tooltipParty").html(MLAs[i].Party);
              $(".tooltipConstuency").html(MLAs[i].Constuency);
              $(".tooltipEthnicity").html(MLAs[i].Ethnicity) + ",";
              $(".tooltipAge").html(MLAs[i].Age);
          }
     });
});

Using #ids

Doesn't really solve the problem, is there a better solution?

index.html

<img src="assets/img/headshots/allan.jpg" id="0" alt="" class="headshot NDP Female White">
<img src="assets/img/headshots/allum.jpg" id="1" alt="" class="headshot NDP Male White">
<img src="assets/img/headshots/altemeyer.jpg" id="2" alt="" class="headshot NDP Male White">

scripts.js

$(".headshot").click(function(){
        index = this.id;

        $(".tooltip").css("display", "block");
            $(".tooltipName").html(MLAs[index].Name);
            $(".tooltipParty").html(MLAs[index].Party);
            $(".tooltipConstuency").html(MLAs[index].Constuency);
            $(".tooltipEthnicity").html(MLAs[index].Ethnicity); + ","
            $(".tooltipAge").html(MLAs[index].Age);
    });
});

Answer 1

You shouldn't use numeric id attribute values. You could simply use their .index() within a selector.

<div id="people">
<img src="assets/img/headshots/allan.jpg" alt="" class="headshot NDP Female White">
<img src="assets/img/headshots/allum.jpg" alt="" class="headshot NDP Male White">
...
</div>

-

$(".headshot").on('click', function() {
    var idx = $(this).index();
    $(".tooltip").css("display", "block");
        $(".tooltipName").html(MLAs[idx].Name);
        $(".tooltipParty").html(MLAs[idx].Party);
        $(".tooltipConstuency").html(MLAs[idx].Constuency);
        $(".tooltipEthnicity").html(MLAs[idx].Ethnicity); + ","
        $(".tooltipAge").html(MLAs[idx].Age);
    });
});

Answer 2

You can use the data attribute as described in the following article.

I have provided the code snippet to review. Please notice that I added key to the JSON data to uniquely identify the record. If you can not do it, you can create a map[key:JsonObject] instead.

 var MLAs = [{ "Key": "allan", "Name": "Nancy Allan", "Age": 62, "Constuency": "St. Vital", "Party": "NDP", "Gender": "Female", "Ethnicity": "White" }, { "Key": "allum", "Name": "James Allum", "Age": null, "Constuency": "Fort Garry-Riverview", "Party": "NDP", "Gender": "Male", "Ethnicity": "White" }]; function findObj(key) { var result = null; $.each(MLAs, function(i, obj) { if (obj.Key == key) result = obj; }); return result; } $(document).ready(function() { $(".headshot").click(function() { var key = $(this).data('key'); var obj = findObj(key); if (obj != null) { $(".tooltip").css("display", "block"); $(".tooltipName").html(obj.Name); $(".tooltipParty").html(obj.Party); $(".tooltipConstuency").html(obj.Constuency); $(".tooltipEthnicity").html(obj.Ethnicity); + "," $(".tooltipAge").html(obj.Age); } }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <img src="https://lh3.googleusercontent.com/-j10EGNjCpSg/AAAAAAAAAAI/AAAAAAAAAE0/QQmvymOupfE/photo.jpg?sz=32" data-key="allan" class="headshot NDP Female White"> <img src="https://www.gravatar.com/avatar/368596193089a24f609307b3af288ae6?s=32&d=identicon&r=PG" data-key="allum" class="headshot NDP Male White"> <table class="tooltip"> <tr> <td class="tooltipName"></td> <td class="tooltipParty"></td> <td class="tooltipConstuency"></td> <td class="tooltipEthnicity"></td> <td class="tooltipAge"></td> </tr> </table>