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

Question

就我而言，我有一个 parent div，它有多个 child div。这些childdiv是根据$.each()函数生成的

函数运行的次数，div的次数得到generated.Thesechilddiv包含像--UserId、UserName、UserPic和a这样的数据按照 button.Now，我想在单击按钮时编写一个服务器端函数，并将 post UserId 写入控制器。

现在，我已经看到很多这样的问题，解决方案是拥有一个全局变量并从 $.each 函数中为该变量赋值。但是，在我的例子中，我的 $.each 函数将循环多次，因此如何在单击跟随按钮时返回特定的 item.Id 并将该值 post 返回控制器

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

您可以将 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  
});
});

希望这会有用

Answer 2

您可以使用 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') }
});

希望这对您有所帮助。

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

how to grab $.each function value in another function

javascript

asp.net-mvc

jquery

asp.net-ajax