нужна помощь в обработке событий клика

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);
  }

})

Iдобавили прослушиватели событий в $ ('. card'), которые являются 12 картами для отображения $ (". modal, .modal-container"), это модалы и оверлей, я получаю тот же модал независимо от того,на какую картинку я нажимаю, может ли кто-нибудь мне помочь, чтобы я мог видеть модалы, которые соответствуют одной и той же информации для каждой маленькой галереи

Answer 1

Я предоставляю общие рекомендации и схему кода.Не стесняйтесь просить разъяснений.

Код, который я пишу, не является ни полным, ни эффективным, но он должен служить отправной точкой.

Необходимо сохранять корреляцию между картой, по которой вы нажимаетеи модал, который вы хотите открыть.

Вы не делаете это прямо сейчас.

Вы можете использовать возможность данных jQuery (https://api.jquery.com/data/), чтобы сделать это или обычный идентификатор.

Сначала добавьте свойство данных индекса для каждого шаблона карты или создайте идентификатор для этого шаблона. У вас есть индекс из $ .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);
    }

})