当用户单击 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) {

    const titleElement = $("#job-title-replace");

    const hiddenInputElement = $("#some-hidden-input");

    titleElement.html(title);

    hiddenInputElement.val(title);

  }

$(document).ready(function() {

  const accordionElement = $("#accordionExample");

  

  const jobOffers = [{

      title: "Fullstack engineer",

      location: "Canada, USA",

      dataId: "fullstack-engineer",

      dataTarget: "collapseOne",

      requirements: [

        "Master Degree",

        "Strong Knowldege in Javascript",

        "ReactJs and NodeJs",

        "MVC Pattern",

        "Algorithms and Data Structures"

      ]

    },

    {

      title: "XR Engineer",

      location: "Dublin",

      dataId: "xr-engineer",

      dataTarget: "collapseTwo",

      requirements: [

        "Master Degree",

        "Strong Knowldege in Javascript",

        "ReactJs and NodeJs",

        "MVC Pattern",

        "Algorithms and Data Structures"

      ]

    }

  ];

  function getNewElement(jobOffer) {

    let requirements = "";

    jobOffer.requirements.forEach(requirement => {

      requirements += `<li style="padding: 8px 0px 8px 0px; color: #000;">${requirement}</li>`

    });

    return `<div class="card">

    <a href="" data-id="${jobOffer.dataId}" data-toggle="collapse" data-target="#${jobOffer.dataTarget}" aria-expanded="true"

      aria-controls="${jobOffer.dataTarget}">

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

        <h2 class="mb-0">

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

            ${jobOffer.title}

          </button>

          <p style="float: right; font-size: 18px;">${jobOffer.location}</p>

        </h2>

      </div>

    </a>

    <div id="${jobOffer.dataTarget}" 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>

                <p style="margin: 10px 0px 10px 0px;">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Earum

                  totam saepe, vitae voluptatibus doloribus dolorum libero delectus cum ipsa dolor quidem, ad officia

                  vero expedita. Explicabo odit sequi soluta nostrum!</p>

              </div>

            </div>

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

              <div class="description-box">

                <h4>Requirements</h4>

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

                  ${requirements}

                </ul>

              </div>

            </div>

            <div class="col-md-12" style="display: flex; justify-content: flex-end;">

              <div class="description-box">

                <button style="font-size: 18px;" id="fullstack" data-toggle="modal" data-target="#exampleModalCenter"

                  class="btn btn-primary" onclick="showTitle('${jobOffer.title}')">Apply Now</button>

              </div>

            </div>

          </div>

        </div>

      </div>

    </div>

  </div>`;

  }

  

  const newHtml = jobOffers.map(jobOffer => getNewElement(jobOffer));

  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">

  <!-- This will be filled in by jQuery -->

</div>

<div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">

  <div class="modal-dialog modal-dialog-centered" role="document">

    <div class="modal-content">

      <div class="modal-header">

        <p class="modal-title" id="exampleModalCenterTitle">You are applying for: <b id="job-title-replace">Full stack

            developer</b></p>

        <button type="button" class="close" data-dismiss="modal" aria-label="Close">

          <span aria-hidden="true">&times;</span>

        </button>

      </div>

      <div class="modal-body">

        <div class="container">

          <div class="row">

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

              <form action="">

                <div class="form-group">

                  <label for="">Name</label>

                  <input style="height: 40px;" type="text" class="form-control" name="name" placeholder="please enter name">

                </div>

                <div class="form-group">

                  <label for="">Email</label>

                  <input style="height: 40px;" type="email" class="form-control" name="email" placeholder="please enter email">

                </div>

                <div class="form-group">

                  <label for="">Message</label>

                  <textarea rows="6" type="text" class="form-control" name="message" placeholder="please enter message"></textarea>

                </div>

                <div style="height: 100px; border-style: dotted; display: flex; justify-content: center; align-items: center;">

                  <input type="file">

                </div>

                <input id="some-hidden-input" name="some-hidden-input" value="" hidden>

              </form>

            </div>

          </div>

        </div>

      </div>

      <div class="modal-footer">

        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>

        <button type="button" class="btn btn-primary">Save changes</button>

      </div>

    </div>

  </div>

</div>

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>

我想补充一点，此时最好只使用像 React 或 Vue 这样的前端库。

编辑：我添加了代码，该代码还将设置隐藏输入字段的值。