文章/答案/技术大牛

发布

社区首页 >问答首页 >如何在循环运行时强制Jquery/JS替换变量？

问如何在循环运行时强制Jquery/JS替换变量？
EN

Stack Overflow用户

提问于 2020-03-11 14:23:57

回答 3查看 59关注 0票数 2

<html>
<header><script src = "/jquery.js"></script></header>
<div id="cars"></div>

<script>
    $.post({
        url:"/cars.php",
        dataType:"JSON",
        success:function(cars){
                var fromidcount = Object.keys(cars).length;
                for (var i=0;i<=(fromidcount-1);i++){
                    var carname= Object.keys(cars)[i];
                    $("#cars").append("<input type='button' id='"+carname+"'>");
                    $("#"+carname).click(function(){
                        alert("selected "+carname);
                    });
                }
        }
    });
</script>
</html>

我从PHP获得了一个JSON数组，并使用其中的值通过Jquery动态创建HTML按钮。到目前为止，它用ids=制作了两个按钮“宝马”和“丰田”。然后我的脚本应该创建指令，这样当id="BMW“被点击时，它就会提醒”选定的宝马“。当id=“丰田”被点击时，它应该警告“选定的丰田”。

然而，当我点击按钮时，两个警告都是“选择了丰田”。我已经检查了开发工具，并确认按钮ids是宝马和丰田，但每个按钮的事件仍然显示alert("selected "+carname);而不是alert("selected "+"BMW");和alert("selected "+"Toyota");

所以我认为当按钮被点击时，Jquery才会更新alert("selected "+carname);中的"carname“变量。但是到那时，循环已经结束，所以它获取的值是循环的最后一个值，也就是丰田。

您可以看到，我在for循环中有多个变量carname的实例。并且除了alert("selected "+carname);中的值之外，所有carname的实例都被它们各自的值所替换。为什么会出现这种情况，我如何修复它？

cars是一个多维数组。[宝马，丰田]

javascript

jquery

回答 3

Stack Overflow用户

发布于 2020-03-11 14:32:25

您在这里遇到了JavaScript的闭包/词法作用域规则。您需要有另一个函数来关闭添加事件处理程序的carname变量，但是从ID读取汽车名称可能更容易，因为您已经有了它：

$("#"+carname).click(function(){
  alert("selected " + this.id);
});

如果需要将该ID用于其他用途，还可以将汽车名称添加为data-属性。

票数 2

Stack Overflow用户

发布于 2020-03-11 14:32:15

您必须使用$(this).attr("id")来获取Carname

 $.post({
        url:"/cars.php",
        dataType:"JSON",
        success:function(cars){
                var fromidcount = Object.keys(cars).length;
                for (var i=0;i<=(fromidcount-1);i++){
                    var carname= Object.keys(cars)[i];
                    $("#cars").append("<input type='button' id='"+carname+"'>");
                    $("#"+carname).click(function(){
                        alert("selected "+$(this).attr("id"));
                    });
                }
        }
    });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
<header><script src = "/jquery.js"></script></header>
<div id="cars"></div>


</html>

票数 1

Stack Overflow用户

发布于 2020-03-11 14:54:57

您可以为函数内部的单击定义处理程序。

new userService().getUsers().then(users => {
  users.forEach(user => {
    const inputElement = document.createElement('input');
    inputElement.value = user.name;
    inputElement.type = 'button';
    inputElement.addEventListener('click', () => alert(user.name));
    document.body.appendChild(inputElement);
  });
});

function userService() {
  const users = [{
      "id": 1,
      "name": "Leanne Graham",
      "username": "Bret",
      "email": "Sincere@april.biz",
      "address": {
        "street": "Kulas Light",
        "suite": "Apt. 556",
        "city": "Gwenborough",
        "zipcode": "92998-3874",
        "geo": {
          "lat": "-37.3159",
          "lng": "81.1496"
        }
      },
      "phone": "1-770-736-8031 x56442",
      "website": "hildegard.org",
      "company": {
        "name": "Romaguera-Crona",
        "catchPhrase": "Multi-layered client-server neural-net",
        "bs": "harness real-time e-markets"
      }
    },
    {
      "id": 2,
      "name": "Ervin Howell",
      "username": "Antonette",
      "email": "Shanna@melissa.tv",
      "address": {
        "street": "Victor Plains",
        "suite": "Suite 879",
        "city": "Wisokyburgh",
        "zipcode": "90566-7771",
        "geo": {
          "lat": "-43.9509",
          "lng": "-34.4618"
        }
      },
      "phone": "010-692-6593 x09125",
      "website": "anastasia.net",
      "company": {
        "name": "Deckow-Crist",
        "catchPhrase": "Proactive didactic contingency",
        "bs": "synergize scalable supply-chains"
      }
    },
    {
      "id": 3,
      "name": "Clementine Bauch",
      "username": "Samantha",
      "email": "Nathan@yesenia.net",
      "address": {
        "street": "Douglas Extension",
        "suite": "Suite 847",
        "city": "McKenziehaven",
        "zipcode": "59590-4157",
        "geo": {
          "lat": "-68.6102",
          "lng": "-47.0653"
        }
      },
      "phone": "1-463-123-4447",
      "website": "ramiro.info",
      "company": {
        "name": "Romaguera-Jacobson",
        "catchPhrase": "Face to face bifurcated interface",
        "bs": "e-enable strategic applications"
      }
    },
    {
      "id": 4,
      "name": "Patricia Lebsack",
      "username": "Karianne",
      "email": "Julianne.OConner@kory.org",
      "address": {
        "street": "Hoeger Mall",
        "suite": "Apt. 692",
        "city": "South Elvis",
        "zipcode": "53919-4257",
        "geo": {
          "lat": "29.4572",
          "lng": "-164.2990"
        }
      },
      "phone": "493-170-9623 x156",
      "website": "kale.biz",
      "company": {
        "name": "Robel-Corkery",
        "catchPhrase": "Multi-tiered zero tolerance productivity",
        "bs": "transition cutting-edge web services"
      }
    },
    {
      "id": 5,
      "name": "Chelsey Dietrich",
      "username": "Kamren",
      "email": "Lucio_Hettinger@annie.ca",
      "address": {
        "street": "Skiles Walks",
        "suite": "Suite 351",
        "city": "Roscoeview",
        "zipcode": "33263",
        "geo": {
          "lat": "-31.8129",
          "lng": "62.5342"
        }
      },
      "phone": "(254)954-1289",
      "website": "demarco.info",
      "company": {
        "name": "Keebler LLC",
        "catchPhrase": "User-centric fault-tolerant solution",
        "bs": "revolutionize end-to-end systems"
      }
    },
    {
      "id": 6,
      "name": "Mrs. Dennis Schulist",
      "username": "Leopoldo_Corkery",
      "email": "Karley_Dach@jasper.info",
      "address": {
        "street": "Norberto Crossing",
        "suite": "Apt. 950",
        "city": "South Christy",
        "zipcode": "23505-1337",
        "geo": {
          "lat": "-71.4197",
          "lng": "71.7478"
        }
      },
      "phone": "1-477-935-8478 x6430",
      "website": "ola.org",
      "company": {
        "name": "Considine-Lockman",
        "catchPhrase": "Synchronised bottom-line interface",
        "bs": "e-enable innovative applications"
      }
    },
    {
      "id": 7,
      "name": "Kurtis Weissnat",
      "username": "Elwyn.Skiles",
      "email": "Telly.Hoeger@billy.biz",
      "address": {
        "street": "Rex Trail",
        "suite": "Suite 280",
        "city": "Howemouth",
        "zipcode": "58804-1099",
        "geo": {
          "lat": "24.8918",
          "lng": "21.8984"
        }
      },
      "phone": "210.067.6132",
      "website": "elvis.io",
      "company": {
        "name": "Johns Group",
        "catchPhrase": "Configurable multimedia task-force",
        "bs": "generate enterprise e-tailers"
      }
    },
    {
      "id": 8,
      "name": "Nicholas Runolfsdottir V",
      "username": "Maxime_Nienow",
      "email": "Sherwood@rosamond.me",
      "address": {
        "street": "Ellsworth Summit",
        "suite": "Suite 729",
        "city": "Aliyaview",
        "zipcode": "45169",
        "geo": {
          "lat": "-14.3990",
          "lng": "-120.7677"
        }
      },
      "phone": "586.493.6943 x140",
      "website": "jacynthe.com",
      "company": {
        "name": "Abernathy Group",
        "catchPhrase": "Implemented secondary concept",
        "bs": "e-enable extensible e-tailers"
      }
    },
    {
      "id": 9,
      "name": "Glenna Reichert",
      "username": "Delphine",
      "email": "Chaim_McDermott@dana.io",
      "address": {
        "street": "Dayna Park",
        "suite": "Suite 449",
        "city": "Bartholomebury",
        "zipcode": "76495-3109",
        "geo": {
          "lat": "24.6463",
          "lng": "-168.8889"
        }
      },
      "phone": "(775)976-6794 x41206",
      "website": "conrad.com",
      "company": {
        "name": "Yost and Sons",
        "catchPhrase": "Switchable contextually-based project",
        "bs": "aggregate real-time technologies"
      }
    },
    {
      "id": 10,
      "name": "Clementina DuBuque",
      "username": "Moriah.Stanton",
      "email": "Rey.Padberg@karina.biz",
      "address": {
        "street": "Kattie Turnpike",
        "suite": "Suite 198",
        "city": "Lebsackbury",
        "zipcode": "31428-2261",
        "geo": {
          "lat": "-38.2386",
          "lng": "57.2232"
        }
      },
      "phone": "024-648-3804",
      "website": "ambrose.net",
      "company": {
        "name": "Hoeger LLC",
        "catchPhrase": "Centralized empowering task-force",
        "bs": "target end-to-end models"
      }
    }
  ];

  this.getUsers = () => Promise.resolve(users);
}

body {
  display: flex;
  flex-direction: column;
}

input[type="button"] {
  margin: 0.2rem;
}

票数 -1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/60630306

复制

相似问题

问如何在循环运行时强制Jquery/JS替换变量？
EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在循环运行时强制Jquery/JS替换变量？EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在循环运行时强制Jquery/JS替换变量？
EN