当用户单击 bootstrap html 中的每个组件时，如何将数据从 bootstrap

Question

我正在开发一个职业页面，其中有可折叠的引导组件，用于显示现在可用的职位。当用户单击每个组件中的“应用”时，我想在模型对话框中显示他/她想要的特定位置的模型。

我想在用户单击特定组件时在模型上显示位置标题，如何使用 jquery 执行此操作。

预先感谢

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

<div class="accordion" id="accordionExample">

  <div class="card">

    <a href="" data-id="Full-stack-developer" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">

      <div class="card-header" id="headingOne">

        <h2 class="mb-0">

          <button style="font-size: 18px;" class="btn btn-link" type="button">

            Full Stack Developer

          </button>

          <p style="float: right; font-size: 18px;">Canada, USA</p>

        </h2>

      </div>

    </a>

    <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordionExample">

      <div class="card-body">

        <div class="card-block">

          <div class="row">

            <div class="col-md-12">

              <div class="description-box">

                <h4>Job Description</h4>

              </div>

            </div>

            <div class="col-md-12">

              <div class="description-box">

                <h4>Requirements</h4>

                <ul style="margin: 10px 0 10px 0px;">

                  <li style="padding: 8px 0px 8px 0px; color: #000;">Master Degreee</li>

                  <li style="padding: 8px 0px 8px 0px; color: #000;">Strong Knowldege in Javascript</li>

                  <li style="padding: 8px 0px 8px 0px; color: #000;">ReactJs and NodeJs</li>

                  <li style="padding: 8px 0px 8px 0px; color: #000;">MVC Pattern</li>

                  <li style="padding: 8px 0px 8px 0px; color: #000;">Master Degreee</li>

Answer 1

您可以将职位空缺存储到数据结构中，并使用它在单击按钮时获取所需的信息：function showTitle(title) {&nbsp; &nbsp; const titleElement = $("#job-title-replace");&nbsp; &nbsp; const hiddenInputElement = $("#some-hidden-input");&nbsp; &nbsp; titleElement.html(title);&nbsp; &nbsp; hiddenInputElement.val(title);&nbsp; }$(document).ready(function() {&nbsp; const accordionElement = $("#accordionExample");&nbsp;&nbsp;&nbsp; const jobOffers = [{&nbsp; &nbsp; &nbsp; title: "Fullstack engineer",&nbsp; &nbsp; &nbsp; location: "Canada, USA",&nbsp; &nbsp; &nbsp; dataId: "fullstack-engineer",&nbsp; &nbsp; &nbsp; dataTarget: "collapseOne",&nbsp; &nbsp; &nbsp; requirements: [&nbsp; &nbsp; &nbsp; &nbsp; "Master Degree",&nbsp; &nbsp; &nbsp; &nbsp; "Strong Knowldege in Javascript",&nbsp; &nbsp; &nbsp; &nbsp; "ReactJs and NodeJs",&nbsp; &nbsp; &nbsp; &nbsp; "MVC Pattern",&nbsp; &nbsp; &nbsp; &nbsp; "Algorithms and Data Structures"&nbsp; &nbsp; &nbsp; ]&nbsp; &nbsp; },&nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; title: "XR Engineer",&nbsp; &nbsp; &nbsp; location: "Dublin",&nbsp; &nbsp; &nbsp; dataId: "xr-engineer",&nbsp; &nbsp; &nbsp; dataTarget: "collapseTwo",&nbsp; &nbsp; &nbsp; requirements: [&nbsp; &nbsp; &nbsp; &nbsp; "Master Degree",&nbsp; &nbsp; &nbsp; &nbsp; "Strong Knowldege in Javascript",&nbsp; &nbsp; &nbsp; &nbsp; "ReactJs and NodeJs",&nbsp; &nbsp; &nbsp; &nbsp; "MVC Pattern",&nbsp; &nbsp; &nbsp; &nbsp; "Algorithms and Data Structures"&nbsp; &nbsp; &nbsp; ]&nbsp; &nbsp; }&nbsp; ];&nbsp; function getNewElement(jobOffer) {&nbsp; &nbsp; let requirements = "";&nbsp; &nbsp; jobOffer.requirements.forEach(requirement => {&nbsp; &nbsp; &nbsp; requirements += `<li style="padding: 8px 0px 8px 0px; color: #000;">${requirement}</li>`&nbsp; &nbsp; });&nbsp; &nbsp; return `<div class="card">&nbsp; &nbsp; <a href="" data-id="${jobOffer.dataId}" data-toggle="collapse" data-target="#${jobOffer.dataTarget}" aria-expanded="true"&nbsp; &nbsp; &nbsp; aria-controls="${jobOffer.dataTarget}">&nbsp; &nbsp; &nbsp; <div class="card-header" id="headingOne">&nbsp; &nbsp; &nbsp; &nbsp; <h2 class="mb-0">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <button style="font-size: 18px;" class="btn btn-link" type="button">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ${jobOffer.title}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </button>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <p style="float: right; font-size: 18px;">${jobOffer.location}</p>&nbsp; &nbsp; &nbsp; &nbsp; </h2>&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; </a>&nbsp; &nbsp; <div id="${jobOffer.dataTarget}" class="collapse show" aria-labelledby="headingOne" data-parent="#accordionExample">&nbsp; &nbsp; &nbsp; <div class="card-body">&nbsp; &nbsp; &nbsp; &nbsp; <div class="card-block">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="row">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="col-md-12">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="description-box">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <h4>Job Description</h4>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <p style="margin: 10px 0px 10px 0px;">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Earum&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; totam saepe, vitae voluptatibus doloribus dolorum libero delectus cum ipsa dolor quidem, ad officia&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; vero expedita. Explicabo odit sequi soluta nostrum!</p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="col-md-12">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="description-box">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <h4>Requirements</h4>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <ul style="margin: 10px 0 10px 0px;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ${requirements}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </ul>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="col-md-12" style="display: flex; justify-content: flex-end;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="description-box">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <button style="font-size: 18px;" id="fullstack" data-toggle="modal" data-target="#exampleModalCenter"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; class="btn btn-primary" onclick="showTitle('${jobOffer.title}')">Apply Now</button>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; </div>&nbsp; </div>`;&nbsp; }&nbsp;&nbsp;&nbsp; const newHtml = jobOffers.map(jobOffer => getNewElement(jobOffer));&nbsp; accordionElement.html(newHtml);});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous"><div class="accordion" id="accordionExample">&nbsp; <!-- This will be filled in by jQuery --></div><div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">&nbsp; <div class="modal-dialog modal-dialog-centered" role="document">&nbsp; &nbsp; <div class="modal-content">&nbsp; &nbsp; &nbsp; <div class="modal-header">&nbsp; &nbsp; &nbsp; &nbsp; <p class="modal-title" id="exampleModalCenterTitle">You are applying for: <b id="job-title-replace">Full stack&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; developer</b></p>&nbsp; &nbsp; &nbsp; &nbsp; <button type="button" class="close" data-dismiss="modal" aria-label="Close">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span aria-hidden="true">&times;</span>&nbsp; &nbsp; &nbsp; &nbsp; </button>&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; <div class="modal-body">&nbsp; &nbsp; &nbsp; &nbsp; <div class="container">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="row">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="col-md-12">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <form action="">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="form-group">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <label for="">Name</label>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <input style="height: 40px;" type="text" class="form-control" name="name" placeholder="please enter name">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="form-group">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <label for="">Email</label>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <input style="height: 40px;" type="email" class="form-control" name="email" placeholder="please enter email">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="form-group">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <label for="">Message</label>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <textarea rows="6" type="text" class="form-control" name="message" placeholder="please enter message"></textarea>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div style="height: 100px; border-style: dotted; display: flex; justify-content: center; align-items: center;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <input type="file">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <input id="some-hidden-input" name="some-hidden-input" value="" hidden>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </form>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; <div class="modal-footer">&nbsp; &nbsp; &nbsp; &nbsp; <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>&nbsp; &nbsp; &nbsp; &nbsp; <button type="button" class="btn btn-primary">Save changes</button>&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; </div>&nbsp; </div></div><script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>我想补充一点，此时最好只使用像 React 或 Vue 这样的前端库。编辑：我添加了代码，该代码还将设置隐藏输入字段的值。