微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦！

将动态 Div 链接到动态模态

分类：编程问答

如何解决将动态 Div 链接到动态模态

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

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

基本上，我想点击“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,}) =>
            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>

任何帮助将不胜感激！

非常感谢， 史蒂夫。

解决方法

Event 对象包含 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>

,

正如 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,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,}) =>
            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 提供。

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。

苹果市值2025年有望达4万亿美元
pythonJavaScriptjavaHTMLPHPreactjsC#AndroidCSSNode.jssqlrpython-3.xMysqLjQueryc++pandasFlutterangularIOSdjangolinuxswifttypescript路由器JSON路由器设置无线路由器h3c华三华三路由器设置华三路由器电脑软件教程arraysdocker软件图文教程Cvue.jslaravelspring-boot