如何在另一个函数中获取$ .each函数值

Question

就我而言，我有一个父div，其中有多个子div。 这些子div是根据$ .each（）函数生成的。

函数运行的次数，生成的div数。这些子div包含数据-UserId，UserName，UserPic和跟随按钮。现在，我想在按钮单击时编写服务器端函数并将UserId发布到控制器。

现在，我看到了很多这样的问题和解决方案，那就是拥有一个全局变量，并从$ .each函数为该变量赋值。 但是，以我为例，我的$ .each函数将循环几次，因此如何在单击“跟随”按钮时取回特定item.Id并将该值回发到控制器

$(document).ready(function() {
var parent = $(".div1");

$.getJSON("/Home/GetUsers", null, function(data) {
  parent.html("");

  $.each(data, function(i, item) {
    var html = "<div class='div2'>";
    html += "Name: " + item.UserName + "<br />";
    html += item.ArticleCount;
    html += "<img src='" + item.UserImage + "'height='20px' width='20px'/>";
    html += "<button type='button' class='newButton'>Click Me!</button>";
// wants to send current userId on button click 
    html += item.Id;
    html += "</div>";
    parent.append(html);
  });
});
parent.on('click', '.newButton', function(e) {
   var button = $(this);
    var html = "<div class='listItem'>";
                   $.ajax({  
                           type: "POST", 
                           url: "Home/Follow", // Controller/View   
                           data: { //Here, i am struck, how to get back                      correct userid from above $.each function
                           id: $(".listItem").    
                  }  
});
});

Answer 1

您可以使用data属性data-id将id存储在每个按钮中，例如：

html += "<button data-id="+item.Id+" type='button' class='newButton'>Click Me!</button>";

当单击按钮时，您可以获得id ：

$.ajax({  
     type: "POST", 
     url: "Home/Follow", // Controller/View   
     data: { id: $(this).data('id') }
});

希望这可以帮助。

Answer 2

您可以将item.Id值作为Id或任何data- *属性添加到按钮。 然后单击即可检索该值。

您也可以只创建一个字符串，而不是html +=

所以我修改了代码，这是代码段

$(document).ready(function() {
var parent = $(".div1");

$.getJSON("/Home/GetUsers", null, function(data) {
  parent.html("");

  $.each(data, function(i, item) {
     // Refactored DOM
    var html = "<div class='div2'>Name: " + item.UserName + "<br />"+item.ArticleCount+
                   "<img src='" + item.UserImage + "'height='20px' width='20px'/>"+
                      "<button type='button' class='newButton' id = '"+item.Id+"'>Click Me!</button>"+
                        item.Id+"</div>";

            parent.append(html);
      });
});
parent.on('click', '.newButton', function(event) {
   var getId = event.target.id;  // Event object will give all parameters you need 
   alert(getId);
    var html = "<div class='listItem'>";
                   $.ajax({  
                           type: "POST", 
                           url: "Home/Follow", // Controller/View   
                           data: { id: getId}   // Added the required Id  
});
});

希望这会有用