如何获取信息从div包含在另一个元素在Javascript?

我目前正在尝试实现一个模式，显示基于事件卡它被调用的信息。下面是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中的信息?

您可以使用.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>

使用闭包来挂起想要显示的信息。一般来说，将数据存储在不同的位置会更好地处理您在这里描述的情况。虽然仅通过使用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应该处理数据存储和操作。

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

相关内容

最新更新

热门标签：