Link 动态 Div 到动态模态

Question

我有一个动态生成的“用户网格”和一个动态生成的“用户模式”。单击“用户卡”时会触发模式（此功能运行良好）。

但是，当单击特定的“用户卡”时...它不仅会加载选定的用户卡信息，还会加载所有用户卡的所有用户数据...

基本上，我想点击“Leanne Graham Card”，只显示“Leanne Graham Modal”内容。

包含以下代码

//THIS IS THE CODE TO REFERENCE EXTERNAL JSON FILE
var userJSON = 'https://captain-steve.github.io/demo/db.json'

//THIS IS THE CODE TO FETCH EXTERNAL JSON FILE
$.getJSON(userJSON, function (populateUsers) {

  //THIS IS THE CODE TO POPULATE JSON DATA INTO TEMPLATE LITERAL USER GRID
  var userCard = populateUsers.reduce((acc, {id, name, username, email, phone, company,}) =>
        acc += `
      <div class='col col-4 align-items-stretch strain-container'>
        <div id="${id}" class="card user-card">
          <div class="card-body">
            <h2 class="title">${name}</h2>
            <h6 class="title">${username}</h6>
            <h6 class="title">${email}</h6>
            <h6 class="title">${phone}</h6>
            <h6 class="title">${company}</h6>
          </div>
        </div>
      </div>`
    , ``);
    $('#user-grid').append(userCard)
});


//THIS IS THE CODE TO RUN WHEN USER CARD IS CLICKED
$('#user-grid').on('click', '.user-card', function(e){

    //THIS IS THE CODE TO REFERENCE EXTERNAL JSON FILE
    var userJSON = 'https://captain-steve.github.io/demo/db.json'

    //THIS IS THE CODE TO FETCH EXTERNAL JSON FILE
    $.getJSON(userJSON + "?id=" + e.currentTarget.id, function (populateUserModal) {

        //THIS IS THE CODE TO POPULATE JSON DATA INTO TEMPLATE LITERAL MODAL
        var userModal = populateUserModal.reduce((acc, {id, name, username, email, phone, company,}) =>
            acc += `
                <div id="${id}" class="card user-card">
                    <div class="card-body">
                        <h2 class="title">${name}</h2>
                        <h6 class="title">${username}</h6>
                        <h6 class="title">${email}</h6>
                        <h6 class="title">${phone}</h6>
                        <h6 class="title">${company}</h6>
                    </div>
                </div>`
            , ``);
        $('#modal-content').append(userModal)
    });
    $('#user-modal').modal({show:true});
});

//THIS IS THE CODE TO CLEAR ALL THE JSON DATA WHEN MODAL IS CLOSED
$("#user-modal").on("hidden.bs.modal", function(){
    $("#modal-content").html("");
});

<!-- Scripts & Sheets -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

<!-- Modal -->
<div id="user-modal" class="user-modal modal fade" tabindex="-1" role="dialog" aria-labelledby="uder-card" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div id="modal-content">

        </div>
    </div>
</div>


<!-- User Grid -->
<div id="user-grid" class="row container fluid-container"></div>

如有任何帮助，我们将不胜感激！

非常感谢，史蒂夫

Answer 1

事件对象包含 currentTarget 属性，它指的是被点击的项目。您可以使用它来提取点击的项目 ID。

然后你只需要 find 用户在 json 中的 id 你得到

//THIS IS THE CODE TO REFERENCE EXTERNAL JSON FILE
var userJSON = "https://captain-steve.github.io/demo/db.json";
//THIS IS THE CODE TO FETCH EXTERNAL JSON FILE
window.$.getJSON(userJSON, function (populateUsers) {
  //THIS IS THE CODE TO POPULATE JSON DATA INTO TEMPLATE LITERAL USER GRID
  var userCard = populateUsers.reduce(
    (acc, { id, name, username, email, phone, company }) =>
      (acc += `
      <div class='col col-4 align-items-stretch strain-container'>
        <div id="${id}" class="card user-card">
          <div class="card-body">
            <h2 class="title">${name}</h2>
            <h6 class="title">${username}</h6>
            <h6 class="title">${email}</h6>
            <h6 class="title">${phone}</h6>
            <h6 class="title">${company}</h6>
          </div>
        </div>
      </div>`),
    ``
  );
  $("#user-grid").append(userCard);
});

//THIS IS THE CODE TO RUN WHEN USER CARD IS CLICKED
$("#user-grid").on("click", ".user-card", function (e) {
  //THIS IS THE CODE TO REFERENCE EXTERNAL JSON FILE
  var userJSON = "https://captain-steve.github.io/demo/db.json";
  //THIS IS THE CODE TO FETCH EXTERNAL JSON FILE
  $.getJSON(userJSON, function (users) {
    const selectedUserId = e.currentTarget.id;
    const selectedUserData = users.find(
      (user) => user.id === Number(selectedUserId)
    );

    //THIS IS THE CODE TO POPULATE JSON DATA INTO TEMPLATE LITERAL MODAL
    let userModal = `
      <div id="${selectedUserData.id}" class="card user-card">
          <div class="card-body">
              <h2 class="title">User not found</h2>
          </div>
      </div>`;

    if (selectedUserData) {
      userModal = `
              <div id="${selectedUserData.id}" class="card user-card">
                  <div class="card-body">
                      <h2 class="title">${selectedUserData.name}</h2>
                      <h6 class="title">${selectedUserData.username}</h6>
                      <h6 class="title">${selectedUserData.email}</h6>
                      <h6 class="title">${selectedUserData.phone}</h6>
                      <h6 class="title">${selectedUserData.company}</h6>
                  </div>
              </div>`;
    }
    $("#modal-content").append(userModal);
  });
  $("#user-modal").modal({ show: true });
});

//THIS IS THE CODE TO CLEAR ALL THE JSON DATA WHEN MODAL IS CLOSED
$("#user-modal").on("hidden.bs.modal", function () {
  $("#modal-content").html("");
});

<!DOCTYPE html>
<html>
  <head>
    <title>Parcel Sandbox</title>
    <meta charset="UTF-8" />
  </head>

  <body>
    <div id="app"></div>
    <link
      rel="stylesheet"
      href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
      integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
      crossorigin="anonymous"
    />
    <script
      src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"
      type="text/javascript"
    ></script>
    <script
      src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
      integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
      crossorigin="anonymous"
    ></script>
    <script
      src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
      integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
      crossorigin="anonymous"
    ></script>

    <!-- Modal -->
    <div
      id="user-modal"
      class="user-modal modal fade"
      tabindex="-1"
      role="dialog"
      aria-labelledby="uder-card"
      aria-hidden="true"
    >
      <div class="modal-dialog modal-dialog-centered" role="document">
        <div id="modal-content"></div>
      </div>
    </div>

    <!-- User Grid -->
    <div id="user-grid" class="row container fluid-container"></div>
    <script src="src/index.js"></script>
  </body>
</html>

Answer 2

正如 Oleksandr Sakun 所说，事件对象包含 currentTarget，它包含您单击的内容的 ID。

//THIS IS THE CODE TO REFERENCE EXTERNAL JSON FILE
var userJSON = 'https://jsonplaceholder.typicode.com/users'

//THIS IS THE CODE TO FETCH EXTERNAL JSON FILE
$.getJSON(userJSON, function (populateUsers) {

  //THIS IS THE CODE TO POPULATE JSON DATA INTO TEMPLATE LITERAL USER GRID
  var userCard = populateUsers.reduce((acc, {id, name, username, email, phone, company,}) =>
        acc += `
      <div class='col col-4 align-items-stretch strain-container'>
        <div id="${id}" class="card user-card">
          <div class="card-body">
            <h2 class="title">${name}</h2>
            <h6 class="title">${username}</h6>
            <h6 class="title">${email}</h6>
            <h6 class="title">${phone}</h6>
            <h6 class="title">${company}</h6>
          </div>
        </div>
      </div>`
    , ``);
    $('#user-grid').append(userCard)
});


//THIS IS THE CODE TO RUN WHEN USER CARD IS CLICKED
$('#user-grid').on('click', '.user-card', function(e){

    //THIS IS THE CODE TO REFERENCE EXTERNAL JSON FILE
    var userJSON = 'https://jsonplaceholder.typicode.com/users'

    //THIS IS THE CODE TO FETCH EXTERNAL JSON FILE
    $.getJSON(userJSON + "?id=" + e.currentTarget.id, function (populateUserModal) {

        //THIS IS THE CODE TO POPULATE JSON DATA INTO TEMPLATE LITERAL MODALS
        var userModal = populateUserModal.reduce((acc, {id, name, username, email, phone, company,}) =>
            acc += `
                <div id="${id}" class="card user-card">
                    <div class="card-body">
                        <h2 class="title">${name}</h2>
                        <h6 class="title">${username}</h6>
                        <h6 class="title">${email}</h6>
                        <h6 class="title">${phone}</h6>
                        <h6 class="title">${company}</h6>
                    </div>
                </div>`
            , ``);
        $('#modal-content').append(userModal)
    });
    $('#user-modal').modal({show:true});
});

//THIS IS THE CODE TO CLEAR ALL THE JSON DATA WHEN MODAL IS CLOSED
$("#user-modal").on("hidden.bs.modal", function(){
    $("#modal-content").html("");
});

<!-- Scripts & Sheets -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

<!-- Modal -->
<div id="user-modal" class="user-modal modal fade" tabindex="-1" role="dialog" aria-labelledby="uder-card" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div id="modal-content">

        </div>
    </div>
</div>


<!-- User Grid -->
<div id="user-grid" class="row container fluid-container"></div>

https://jsonplaceholder.typicode.com/users 有一个查询参数 id，您可以从 currentTarget 提供它。

Link 动态 Div 到动态模态

Link Dynamic Div to Dynamic Modal

javascript

jquery

json

dynamic-html

bootstrap-modal