在处理点击事件方面需要帮助

Question

所以我提出了一个返回随机图像的 ajax 请求

这是我的 ajax 请求

$.ajax({
  url: 'https://randomuser.me/api/?nat=us&results=12&',
  dataType: 'json',
  success: function(data) {
    console.log(data); //this should log the data for 12 employees in JSON format



    var employeeInfo = data.results //creating a reference to data.results
    var _cardTemplate = ''; //make variable reference for gallery
    var modalBoxContainer = ''; //make variable for modal containers
    $.each(employeeInfo, function(index, employee) {
      //create variable references for Name, email, city,state, etc
      var name = employee.name.first + " " + employee.name.last;
      var email = employee.email;
      var picture = employee.picture.large;
      var location = employee.location.city;
      var number = employee.phone;
      var fullStreet = employee.location.street + " " + location + " " + employee.location.postcode;
      var birthday = employee.dob.date;

      //CREATE GALLERY CARDS AND SHOW CONTENT FOR SMALL GALLERY CARDS


      _cardTemplate += '<div class="card">';
      _cardTemplate += '<div class="card-img-container">';
      _cardTemplate += '<img class="card-img" src= "' + picture + '" alt="profile picture"></div>';
      _cardTemplate += '<div class="card-info-container"><h3 id="name" class="card-name cap">' + name + '</h3>';
      _cardTemplate += '<p class="card-text">' + email + '</p><p class="card-text cap">' + location + '</p>';
      _cardTemplate += '</div></div>';



      //CREATE MODAL CARDS AND SHOW CONTENT FOR THEM

      modalBoxContainer += '<div class="modal-container">';
      modalBoxContainer += '<div class="modal">';
      modalBoxContainer += '<button type="button" id="modal-close-btn" class="modal-close-btn"><strong>X</strong></button>';
      modalBoxContainer += '<div class="modal-info-container"><img class="modal-img" src= "' + picture + '" alt="profile picture"><h3 id="name" class="modal-name cap">' + name + '</h3><p class="modal-text">' + email + '</p><p class="modal-text cap">' + location + '</p>';
      modalBoxContainer += '<hr>';
      modalBoxContainer += '<p class="modal-text">' + number + '</p><p class="modal-text">' + fullStreet + '</p><p class="modal-text">' + birthday + '</p></div>';
      modalBoxContainer += '<div2>';


      /*appends an "active" class to .modal(pop-up-window) and .modal-container(overlay) when .card is clicked

   I used a code snippet from https://www.pair.com/support/kb/how-to-use-jquery-to-generate-modal-pop-up-when-clicked/
   */
      $(document).ready(function() { //this makes sure the function will run only after the elements are fully loaded

        $('.card').on("click", function() {
          //$(".modal, .modal-container").addClass("active");
          $(".modal, .modal-container").addClass("active");
          console.log('the modal should pop up after clicking the div card')
        });

        /*This removes the "active" class to .modal(pop-up-window)  and .modal-container 
        when clicking on: the "X" button, the opened modal or clicking outside the modal,
        so the user has 3 ways to close a modal, this improves UX
        */

        $('#modal-close-btn, .modal, .modal-container').on("click", function() {
          $(".modal, .modal-container").removeClass("active");
          console.log('you clicked on the x button');
        });
      })
    });

    $('#gallery').append(_cardTemplate); //Append Finally all cards with employee details
    //Finally, I will append modalBoxContainer inside body tag
    $('body').append(modalBoxContainer);
  }

})

我在 $('.card') 中添加了事件侦听器，这是 12 张卡片，以便显示 $(".modal, .modal-container") 这些是模态和叠加层，我最终得到了无论我点击哪张图片都相同的模态，有人可以帮助我，以便我可以看到与每个小画廊的相同信息匹配的模态

Answer 1

我提供一般准则和代码大纲。随时要求澄清。

我正在编写的代码既不完整也不高效，但它应该作为一个起点。

你需要保持你点击的卡片和你想要打开的模式之间的关联。

你现在没有这样做。

您可以使用 jQuery 的数据功能 (https://api.jquery.com/data/) 或普通 id 来执行此操作。

首先，在每个卡片模板上添加索引数据属性或为该模板构建一个 id。你有来自 $.each 的索引

然后为每个模态创建一个单独的 div。每个 div 应该有一个与各自卡片对应的索引。

您在所有卡片上添加一个点击处理程序，您只激活与其对应的模式。

$.ajax({
    url: 'https://randomuser.me/api/?nat=us&results=12&',
    dataType: 'json',
    success: function(data) {
    console.log(data); //this should log the data for 12 employees in JSON format

    var employeeInfo = data.results //creating a reference to data.results
    var _cardTemplate = ''; //make variable reference for gallery
    //start the container outside the loop:
    var modalBoxContainer = '<div class="modal-container">'; 
    $.each(employeeInfo, function(index, employee) {
        //create variable references for Name, email, city,state, etc
        var name = employee.name.first + " " + employee.name.last;
        var email = employee.email;
        var picture = employee.picture.large;
        var location = employee.location.city;
        var number = employee.phone;
        var fullStreet = employee.location.street + " " + location + " " + employee.location.postcode;
        var birthday = employee.dob.date;

        _cardTemplate += '<div class="card" data-index="'+index+'">';
        _cardTemplate += '<div class="card-img-container">';
        _cardTemplate += '<img class="card-img" src= "' + picture + '" alt="profile picture"></div>';
        _cardTemplate += '<div class="card-info-container"><h3 id="name" class="card-name cap">' + name + '</h3>';
        _cardTemplate += '<p class="card-text">' + email + '</p><p class="card-text cap">' + location + '</p>';
        _cardTemplate += '</div></div>';

        //add each 
        modalBoxContainer += '<div class="modal" data-index="'+index+'">';
        modalBoxContainer += '<button type="button" id="modal-close-btn" class="modal-close-btn"><strong>X</strong></button>';
        modalBoxContainer += '<div class="modal-info-container"><img class="modal-img" src= "' + picture + '" alt="profile picture"><h3 id="name" class="modal-name cap">' + name + '</h3><p class="modal-text">' + email + '</p><p class="modal-text cap">' + location + '</p>';
        modalBoxContainer += '<hr>';
        modalBoxContainer += '<p class="modal-text">' + number + '</p><p class="modal-text">' + fullStreet + '</p><p class="modal-text">' + birthday + '</p></div>';
    });
    //close container:
    modalBoxContainer += "</div>";

    $(document).ready(function() { //this makes sure the function will run only after the elements are fully loaded

        $('.card').on("click", function() {
            var theIndex = $(this).data("index");

            $(".modal", $(".modal-container")).each(function(index){
                if( $(this).data("index") === theIndex) $(this).addClass("active");
                else $(this).removeClass("active");
            });
        });

        $('#modal-close-btn, .modal, .modal-container').on("click", function() {
            $(".modal", $(".modal-container")).removeClass("active");
            console.log('you clicked on the x button');
        });
     })



     $('#gallery').append(_cardTemplate); //Append Finally all cards with employee details
     //Finally, I will append modalBoxContainer inside body tag
     $('body').append(modalBoxContainer);
    }

})