时间戳

首页 > 解决方案 > 如何从单击事件处理程序中获取 ID？

javascript - 如何从单击事件处理程序中获取 ID？

问题描述

我正在尝试创建一个 ID 以用作模式的选择器，然后我将能够访问显示属性。

   $.ajax({
      url: 'https://randomuser.me/api/?results=12',
      dataType: 'json',
      success: function(data) {
        console.log(data);
        employees = data.results;
        $.each(employees, function (i, employee) { 

    newHTML += '<div id="' + i + '" class="container">';
    newHTML += '<div class="employee-img-container">';
    newHTML += '<img class="employee-img" src="' + employee.picture.large + '" alt="employee image">';
    newHTML += '</div>';
    newHTML += '<div class="employee-info-container">';
    newHTML += '<h3 class="employee-name">' + employee.name.first + ' ' + employee.name.last + '</h3>';
    newHTML += '<p class="employee-email">' + employee.email + '</p>';
    newHTML += '<p class="employee-location">' + employee.location.city + ', ' + employee.location.state + '</p>';
    newHTML += '</div></div></div></div>';

    employeeArr.push(employee);

    modalHTML += '<div id="modal' + i + '" class="modal">';
    modalHTML += '<div class="modal-content">';
    modalHTML += '<div class="modal-header">';
    modalHTML += '<span class="close">&times;</span>';
    modalHTML += '<img class="employee-img" src="' + employee.picture.large + '" alt="employee image">';
    modalHTML += '<h2 class= emp-modal-name>' + employee.name.first + ' ' + employee.name.last + '</h2>';
    modalHTML += '</div';
    modalHTML += '<div class="modal-body">';
    modalHTML += '<p>Employee Info</p>';
    modalHTML += '</div></div></div>';

    modalArr.push(employee);

    });
    $('.grid-container').html(newHTML);
    $('.modal-container').html(modalHTML);
        $('.container').on('click', function (event) {
            console.log(event.currentTarget.id);
            let newId = '#modal' + event.currentTarget.id;
            let displayModal = $(newId)
            let display = document.querySelector(newId);
            //displayModal.style.display = 'block';
            console.log(displayModal);
            console.log(display);
            console.log(newId);

});
}
});

当我记录event.currentTarget.id我得到一个数字时，我还可以创建一个我想用作选择器的字符串。我不知道如何将它用作实际的扇区。不确定是否需要使用 if 语句将其与要显示的模态类的 id 进行比较。谢谢！

标签： javascriptjquery

解决方案

像这样试试

$(document).ready(function() {
    $("a").click(function(event) {
        alert(event.target.id);
    });
});

推荐阅读