Question

问题：

我正在编写一个跟踪电子应用程序，其中用户数据存储在本地JSON文件中。本质上，我有卡（通过json加载用户信息）以通过html显示。我的下一步是运行python后端，我遇到的问题是我当前无法加载正确的数组值，当前只有最后一个正在加载到我试图传递给python的变量中。由于我正在使用forEach，因此我不必计数或仍然需要这样做？

我希望发生的事情：

我希望使用当前的user.handle值弹出警报。现在发生的是，无论我按下哪张卡，它只会弹出数组中的最后一个值。如何使每个按钮按下触发相应的句柄值？

当我测试并将onclick="myFunction11()"换为onclick=alert('${user.handle}')时，它将打印正确的句柄值。因此，我可以假设我每次都只覆盖var city，并保留数组中的最后一个。关于如何正确使myFunction11拉动我喜欢的相应句柄值的任何建议。谢谢

问题：

我如何正确地使myFunction11从数组中提取正确的句柄值？还是有更好的方法来实现这一目标？

代码：

  $(document).ready(function() {
   users.forEach(function(user) {
  $('.team').append(`<div class="card">
   <figure>
    <img src="${user.image}" />
     <figcaption>
      <h4>${user.name}</h4>
      <h5>${user.handle}</h5>
     </figcaption>
   </figure>
 <div class="links">
   <a href="#" onclick="myFunction11()"><i class="fa fa-pencil"></i></a>
   <a href="#"><i class="fa fa-truck"></i></a>
   <a href="modal"><i class="fa fa-trash-o"></i></a>
 </div>
 <div class="task">
   <div>

   </div>
 </div>
 <div class="bottom-links">
   <a href="#" onclick="myFunction11()"><i class="fa fa-pencil"></i> EDIT</a>
   <a href="#"><i class="fa fa-truck"></i> TRACK</a>
 </div>
 </div>
   <script>
 function myFunction11() {
   var city = '${user.handle}';
   alert(city);
 }
 </script>
 `);
   });

Answer 1

在循环外定义函数并将用户索引作为参数传递

         function myFunction11(index) {
                    var city = users[index].handle;
                    alert(city);
         }    

         $(document).ready(function() {
                   users.forEach(function(user,i) {
                    $('.team').append(`<div class="card">
                     <figure>
                      <img src="${user.image}" />
                       <figcaption>
                        <h4>${user.name}</h4>
                        <h5>${user.handle}</h5>
                       </figcaption>
                     </figure>
                   <div class="links">
                     <a href="#" onclick="myFunction11(${i})"><i class="fa fa-pencil"></i></a>
                     <a href="#"><i class="fa fa-truck"></i></a>
                     <a href="modal"><i class="fa fa-trash-o"></i></a>
                   </div>
                   <div class="task">
                     <div>

                     </div>
                   </div>
                   <div class="bottom-links">
                     <a href="#" onclick="myFunction11(${i})"><i class="fa fa-pencil"></i> EDIT</a>
                     <a href="#"><i class="fa fa-truck"></i> TRACK</a>
                   </div>
                   </div>`);
             });
        });

Answer 2

添加相同功能的副本确实是一种不好的做法。当您有三个用户时，将定义函数myFunction11三次。实际上（正如您猜到的那样），您最终得到的函数只有最后一个值city。

相反，这应该更好：

$(document).ready(function() {

  $('.team').append(`<script>
      function myFunction11(city) {
        alert(city);
      }
    </script>`);

  users.forEach(function(user) {
    $('.team').append(`
       ...
 <a href="#" onclick="myFunction11('${user.handle}')"><i class="fa fa-pencil"></i></a>
      ...`);

});

从数组中选择正确的值并分配给变量

2 个答案: