麻烦循环数组，避免添加ID

Question

期待：

将56个人中的每个人的数据显示在弹出窗口/＆＃34;工具提示＆＃34;当你点击他们的脸部图像（见index.html）而不必使用id。例如，单击Allan的图像应该会为您提供存储在var MLA中的数据，尝试使用for循环获得一点成功，也许.each（）

示例中有两个工作量scripts.js，但实际上总共有56个项目我试图迭代。是的，现在我得到阵列中的最后一个人。

scripts.js（数据，尝试循环）

    // 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);
          }
     });
});

使用#ids

没有真正解决问题，是否有更好的解决方案？

的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

您不应使用数字id属性值。你可以在选择器中使用他们的.index（）。

<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

您可以使用following文章中描述的数据属性。

我提供了要审核的代码段。 请注意，我添加了JSON数据的密钥以唯一标识记录。 如果你不能这样做，你可以改为创建一个map [key：JsonObject]。

＆＃13;

＆＃13;

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);
    }
  });
});

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;