Question

大家好，我现在正在学习javascript几个月，并试图编写我的第一个，而不是琐碎的应用程序，并遇到了这个问题。这是我的代码示例：

$(document).ready(function() {
  let contributorsArr = [];
  let url = 'https://api.github.com/repos/angular/angular';
  let usersArr = [];
  fetch(url).then(response => response.json()).then(data => {
    let auth = '';
    contributorsArr = data.map(item => {
      let contributions = item.contributions;
      let id = item.id;
      return {id, contributions};
    });


    const userUrls = data.map(item => item.url + auth);
    const users = userUrls.map(userUrl => fetch(userUrl));
    return Promise.all(users);

  }).then(responses => {
    return Promise.all(responses.map(user => user.json()));
  }).then(users => {
    contributorsArr.forEach(function(obj1) {
      users.forEach(function(obj) {
        if (obj1.id === obj.id) {
          Object.assign(obj, obj1);
        }
      });
      return users;
    });

    usersArr.push(users);

    $.each(users, function (index,user) {
      let that = this;

      $('#users').on('click','#userPanel',function (user) {
        console.log(that.id);
      });

      $('#users').append(`
        <div id="userPanel" class="panel panel-default">
        <div class="panel-heading">
        <h3 class="panel-title">${user.name ? user.name :    user.login}</h3>
        </div>
        <div class="panel-body">
        <div class="row">
        <div class="col-md-3 ">
        <img class="thumbnail avatar" src="${user.avatar_url}" alt="avatar">
        <a target="_blank" class="btn btn-primary btn-block" href="${user.html_url}">View Profile on GitHub</a>
        </div>

        <div class="col-md-9">
        <span class="label label-default">Public Repos: ${user.public_repos} </span>
        <span class="label label-primary">Public Gists: ${user.public_gists}</span>
        <span class="label label-success">Contributions: ${user.contributions}</span>
        <span class="label label-info">Followers: ${user.followers}</span>
        </div>
        </div>
        </div>
        </div>
        `);

    });
  });
});

我的问题是如何为每个userPanel绑定事件处理程序，有没有办法根据贡献量或要点对它们进行排序？

Answer 1

根据W3C标准，ID不应重复。

因此，请使用class="userPanel"代替id="userPanel"

$('#users').on('click','.userPanel',function (user) {
                console.log(this); //using this u can traversee= up-down
            });//move it to outside of each.

实际DOM追加

$.each(users,function (index,user) {
            let that = this;

            $('#users').append(`
                    <div class="userPanel" class="panel panel-default">
                      <div class="panel-heading">
                        <h3 class="panel-title">${user.name ? user.name :    user.login}</h3>
                      </div>
                      <div class="panel-body">
                        <div class="row">
                            <div class="col-md-3 ">
                                <img class="thumbnail avatar" src="${user.avatar_url}" alt="avatar">
                                <a target="_blank" class="btn btn-primary btn-block" href="${user.html_url}">View Profile on GitHub</a>
                            </div>

                            <div class="col-md-9">
                            <span class="label label-default">Public Repos: ${user.public_repos} </span>
                            <span class="label label-primary">Public Gists: ${user.public_gists}</span>
                            <span class="label label-success">Contributions: ${user.contributions}</span>
                            <span class="label label-info">Followers: ${user.followers}</span>
                            </div>
                        </div>
                      </div>
                    </div>          
                            `);

        });

链接then（）并访问JavaScript中的数据

1 个答案: