Javascript 在循环中创建多个单击事件_Javascript_Jquery_Json

Javascript 在循环中创建多个单击事件

javascript jquery json

Javascript 在循环中创建多个单击事件,javascript,jquery,json,Javascript,Jquery,Json,目前正在处理一个可重用的javascript控件，该控件将显示一个6人的列表，当您单击他们的名字时，会出现一个弹出窗口，显示他们的技能等级。我正在使用JQuery生成大部分html，到目前为止，它都能正常工作。这些人是从一个JSON文件中读取的，目前有6个，但我希望这样，无论JSON文件中有多少人，每个人都有自己的onclick函数。以下是如何设置单击事件： document.getElementById("0").onclick = function () { overlay

目前正在处理一个可重用的javascript控件，该控件将显示一个6人的列表，当您单击他们的名字时，会出现一个弹出窗口，显示他们的技能等级。我正在使用JQuery生成大部分html，到目前为止，它都能正常工作。这些人是从一个JSON文件中读取的，目前有6个，但我希望这样，无论JSON文件中有多少人，每个人都有自己的

onclick

函数。以下是如何设置单击事件：

document.getElementById("0").onclick = function ()
    {
     overlay.style.display = "block";
     sk.style.display = "block";
     setSkills(0)
    };
    document.getElementById("1").onclick = function ()
    {
     overlay.style.display = "block";
     sk.style.display = "block";
     setSkills(1)
    };
    document.getElementById("2").onclick = function ()
    {
     overlay.style.display = "block";
     sk.style.display = "block";
     setSkills(2)
    };
    document.getElementById("3").onclick = function ()
    {
     overlay.style.display = "block";
     sk.style.display = "block";
     setSkills(3)
    };
    document.getElementById("4").onclick = function ()
    {
     overlay.style.display = "block";
     sk.style.display = "block";
     setSkills(4)
    };
    document.getElementById("5").onclick = function ()
    {
     overlay.style.display = "block";
     sk.style.display = "block";
     setSkills(5)
    };

我觉得硬编码会破坏项目的可重用性，有没有办法为

元素数量动态生成此代码

以下是html代码：

<!doctype html>
<html>

<head>

    <meta charset="utf-8">
    <title></title>
    <script type="text/javascript" src="jquery-3.1.1.min.js"></script>
    <script src="Player.js"></script>
    <link rel="stylesheet" href="style.css" type="text/css">

</head>

<body>
    <header>

    </header>

    <div id="container">
    <div id="overLay"></div>
    <div id="skills">

    </div>
    </div>
    <script>

    </script>
</body>
</html>

以下是JQuery生成的html代码：

var data;
var ulClass
var liId
var html
var skill
var playerClass
var x = 'container'

$.getJSON("players.json", function(json)
{
     var overlay = document.getElementById("overLay");
     var sk = document.getElementById("skills")
     data = json

    ulClass = "list"
    liId = "listItems" 
    html ='<div id="' + liId  + '" class="' + ulClass + '">';
    skills = '<ul  class="' + ulClass + '">';
    playerClass = "player"

   $(data).each(function(i)
   {

        console.log(x)
        html += '<p id="' +  i + '">' + data[i].Name + "</p>";


   });
   html += '<hr>'
   html += "</div>";
   $('#container').append(html);

var数据；
乌拉尔阶
李氏变种
变量html
变量技能
var播放器类
var x='container'
$.getJSON（“players.json”，函数（json）
{
var overlay=document.getElementById（“overlay”）；
var sk=document.getElementById（“技能”）
data=json
ulClass=“列表”
liId=“listItems”
html=''；
技能=””；
playerClass=“玩家”
$（数据）。每个功能（i）
{
console.log（x）
html+='”+数据[i].Name+“”；
});
html+=''
html+=“”；
$（'#container'）.append（html）；

您可以在循环中附加一个公共类，您可以在其中为类似

的人员创建HTML。人员配置文件

，然后对该类使用单击处理程序，如

$('.people-profile').on('click', function() {
  var selectedPersonId = $(this).attr('id');

  overlay.style.display = "block";
  sk.style.display = "block";      

  setSkills(parseInt(selectedPersonId));
});

我认为您应该这样做。

而不需要更改代码：

for(var index = 0; index < 6; index++)
{
    (function(picked){
        document.getElementById("dontusenumbersfirst" + picked).onclick = function ()
        {
            overlay.style.display = "block";
            sk.style.display = "block";
            setSkills(picked)
        };
    })(index)
}

for（var索引=0；索引<6；索引++）
{
（功能（已拾取）{
document.getElementById（“dontusenumbersfirst”+picked）.onclick=function（）
{
overlay.style.display=“块”；
sk.style.display=“块”；
设置技能（已拾取）
};
})（索引）
}

将其包含在for循环中，然后将其包含在带有参数的匿名函数中

如果跳过匿名函数部分，您将引用所有6个侦听器函数的“index”，其值为5。

您可以使用for循环迭代li元素

var items = document.querySelectorAll('#list li');

for(var i=0;i<items.length;i++){
    this.onclick = function(){
    overlay.style.display = "block";
    sk.style.display = "block";
        setSkills(i);
    }
}

var items=document.querySelectorAll（'#list li'）；
对于（var i=0；i获取特定模式中人员元素的ID，并遵循此操作，以便选择和绑定所有人员元素上的单击事件
您的HTML是什么样子的？抱歉，现在将向您显示HTML代码！我实现了您的解决方案，但由于ID似乎为空，因此出现了一个错误。我认为您不能使用数字作为第一个选项元素id的t字符。如您所说，首先添加了一个字符串，但它仍然返回null，理想情况下，for循环应该嵌入到方法中。each（）
方法中，因为该方法生成id？在$（'#container'）之后运行它。append（html）
在附加元素之前，这些元素不存在于DOM中。您还可以将元素创建为jQuery变量，并对其进行操作/附加。在可读性和可用性方面更好。