如何从 Javascript 中另一个元素中包含的 div 获取信息？答案

【问题标题】：How to get information from divs contained within another element in Javascript?如何从 Javascript 中另一个元素中包含的 div 获取信息？
【发布时间】：2021-02-10 05:01:00
【问题描述】：

我目前正在尝试实现一个基于调用它的事件卡显示信息的模式。这是 HTML 代码，以一个事件卡为例：

<div class="event-card upcoming hackathon">
  <div class="row">
    <button type="button" class="col-md-12 modal-button" data-toggle="modal"
     data-target="#exampleModal" data-name="&ltinterstell/Her&gt">
       <div style="display:inline-flex; margin-left: -10px">
         <div class="col-md-4  event_bg">
           <img src="img/logos/interstellher.png" alt="" class="img-fluid event_thumbnail">
         </div>
         <div class="col-md-8 mt-sm-20 left-align-p" style="margin-left: -15px">
           <h3 style="font-weight:bold">&ltinterstell/Her&gt</h3>
           <p class="event-info">
             The &ltinterstell/her&gt hackathon is an 8-hour event... 
           </p>
          <div class="events-time-place">
             <div class="events-date">
               <i class="fa fa-calendar-o fa-events-icon" aria-hidden="true"></i>
               <p style="margin-left: 10px">February 6-7, 2021</p>
             </div>
             <div class="events-place">
               <i class="fa fa-map-marker fa-events-icon"></i>
               <p style="margin-left: 10px">Virtual over Zoom</p>
             </div>
           </div>
         </div>
       </div>
     </button>
  </div>
</div>

以及触发模态的 Javascript 代码（取自 Bootstrap）：

$('#exampleModal').on('show.bs.modal', function (event) {
    var button = $(event.relatedTarget) // Button that triggered the modal
    console.log(button)
    var recipient = button.data('name') // Extract info from data-* attributes
    var img = button.querySelect("event_thumbnail")
    // If necessary, you could initiate an AJAX request here (and then do the updating in a callback).
    // Update the modal's content. We'll use jQuery here, but you could use a data binding library or other methods instead.
    var modal = $(this)
    modal.find('.modal-title').text(recipient)
    modal.find('.modal-subtitle').text(recipient)
    modal.find('.modal-body input').val(recipient)
  })

代码成功触发了模式，但我不确定如何显示 HTML 代码中的信息。我想显示相同的事件标题、图像、p 描述和时间/地点信息。我的 Javascript 代码当前检索触发模式的按钮，但我如何也检索以下 div 中的信息？

【问题讨论】：

标签： javascript html jquery bootstrap-4

【解决方案1】：

您可以使用.find() 方法获取所有其他值，即：button.find('.event-info').text() 这将为您提供单击按钮的事件信息值，然后将它们添加到您的模式中。

演示代码：

$('#exampleModal').on('show.bs.modal', function(event) {
  var button = $(event.relatedTarget) // Button that triggered the modal
  var recipient = button.data('name')
  //get other values using .find..
  var sub_title = button.find('.event-info').text()
  var place_date = button.find('.events-date p').text()
  var event_place = button.find('.events-place p').text()
  var modal = $(this)
  modal.find('.modal-title').text(recipient)
  modal.find('.modal-subtitle').text(sub_title)
  modal.find('.modal-body p').html(place_date + "<br>" + event_place)
})

<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://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></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>
<div class="event-card upcoming hackathon">
  <div class="row">
    <button type="button" class="col-md-12 modal-button" data-toggle="modal" data-target="#exampleModal" data-name="&ltinterstell/Her&gt">
       <div style="display:inline-flex; margin-left: -10px">
         <div class="col-md-4  event_bg">
           <img src="img/logos/interstellher.png" alt="" class="img-fluid event_thumbnail">
         </div>
         <div class="col-md-8 mt-sm-20 left-align-p" style="margin-left: -15px">
           <h3 style="font-weight:bold">&ltinterstell/Her&gt</h3>
           <p class="event-info">
             The  hackathon is an 8-hour event... 
           </p>
          <div class="events-time-place">
             <div class="events-date">
               <i class="fa fa-calendar-o fa-events-icon" aria-hidden="true"></i>
               <p style="margin-left: 10px">February 6-7, 2021</p>
             </div>
             <div class="events-place">
               <i class="fa fa-map-marker fa-events-icon"></i>
               <p style="margin-left: 10px">Virtual over Zoom</p>
             </div>
           </div>
         </div>
       </div>
     </button>
  </div>
</div>
<div class="event-card upcoming hackathon">
  <div class="row">
    <button type="button" class="col-md-12 modal-button" data-toggle="modal" data-target="#exampleModal" data-name="&ltinterstell/Her&gt">
       <div style="display:inline-flex; margin-left: -10px">
         <div class="col-md-4  event_bg">
           <img src="img/logos/interstellher.png" alt="" class="img-fluid event_thumbnail">
         </div>
         <div class="col-md-8 mt-sm-20 left-align-p" style="margin-left: -15px">
           <h3 style="font-weight:bold">&ltinterstell/Her&gt</h3>
           <p class="event-info">
             The  hackathon is an 3-hour event... 
           </p>
          <div class="events-time-place">
             <div class="events-date">
               <i class="fa fa-calendar-o fa-events-icon" aria-hidden="true"></i>
               <p style="margin-left: 10px">February 6-17, 2021</p>
             </div>
             <div class="events-place">
               <i class="fa fa-map-marker fa-events-icon"></i>
               <p style="margin-left: 10px">Virtual over Zoom1</p>
             </div>
           </div>
         </div>
       </div>
     </button>
  </div>
</div>
<div id="exampleModal" class="modal fade" role="dialog">
  <div class="modal-dialog">

    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title"></h4>
        <h3 class="modal-subtitle"></h3>
      </div>
      <div class="modal-body">
        <p></p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>

  </div>
</div>

【讨论】：

【解决方案2】：

使用闭包来保留您想要显示的信息。一般来说，通过将数据存储在不同的位置可以更好地处理您在此处描述的内容。虽然您所描述的仅通过使用 DOM 选择器函数即可实现，但最好在数据结构中检索您想要的数据，而不是使用 HTML 来完成它。这不是 HTML 的设计目的。

如果您执行以下操作

function applyModalOnclick(element, title, image, description, whenWhere){ // put your arguments into an object
    element.onclick = () => {
        element.querySelector("modal-title").innerHTML = Title
        element.querySelector("modal-subtitle").innerHTML = Description
        element.querySelector("modal-body-input").value = "Put something here"
    }
}

这样就可以完成您想要的，而无需从 HTML 中提取数据。 HTML 的设计目的并不是为了完成您要求它做的事情，这就是为什么您无法弄清楚如何去做的原因。

HTML 应该为您的项目的可视层提供结构，而 JS 应该处理数据存储和操作。

如果您真的想将所有数据放在一个地方，我建议您实现一个类来存储所有数据、分配事件处理程序并管理您的模态状态。

【讨论】：