Question

目前正在处理一个可重复使用的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)
    };

我觉得这些硬编码会破坏项目的可重用性，有没有办法动态生成n个元素的代码？

这是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);

Answer 1

不改变你的大部分代码：

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循环中，然后将其包含在带参数的匿名函数中。

如果跳过匿名函数部分，则将为所有6个侦听器函数引用“index”，该函数以值5结束。

Answer 2

您可以在循环中附加一个公共类，为.people-profile之类的人创建HTML，然后使用该类的单击处理程序，如

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

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

  setSkills(parseInt(selectedPersonId));
});

我认为应该这样做。

Answer 3

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

Answer 4

以特定模式获取人员元素的ID，并按照此SO选择并绑定所有人员元素上的点击事件Jquery selector to get all select dropdowns with ID pattern

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

4 个答案: