Question

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

函数运行的次数，div生成的数量。这个子div包含像UserId，UserName，UserPic和跟随按钮这样的数据。现在，我想在按钮点击上写一个服务器端函数并发布UserId到控制器。

现在，我已经看到很多问题和解决方案是有一个全局变量并从$ .each函数为该变量赋值。但是，在我的情况下，我的$ .each函数将循环多次所以如何取回特定项目。点击跟随按钮并将该值回发给控制器

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

您可以使用id属性data在每个按钮中存储data-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  
});
});

希望这会有用

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

2 个答案: