javascript - 如何获取 event.relatedTarget 最接近的类文本
问题描述
我正在处理下面的代码。为什么我无法.para
使用每个按钮获得最接近的段落文本$(event.relatedTarget)
?
如您所见,我也为每个与事件相关的按钮获取了虚拟索引号:
$('#myModal').on('show.bs.modal', function (event) {
var button = $(event.relatedTarget) ;
console.log(button.index());
console.log(button.parent().closest('.para').text());
})
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" crossorigin="anonymous"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>
<!-- Button trigger modal -->
<div class="container"><p class="para">Winter</p></div>
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
First Launcegr
</button>
<div class="container"><p class="para">Summer</p></div>
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">
Second Launcegr
</button>
<div class="container"><p class="para">Fall</p></div>
<button type="button" class="btn btn-warning btn-lg" data-toggle="modal" data-target="#myModal">
Third Launcegr
</button>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
解决方案
它正在遍历 DOM 的错误部分。试试这个:
$('#myModal').on('show.bs.modal', function (event) {
var button = $(event.relatedTarget);
console.log(button.prev().find('.para').text());
});
推荐阅读
- assembly - 带有数组和字符串的 LDRB 指令
- c# - 在协程中使用 Mathf.SmoothDamp() 花费的时间比预期的要长
- a-star - 如何为 A 星算法调试我的代码?
- security - 如何防止 iframe 显示电子邮件以加载图像和其他电子邮件跟踪器?
- java - 如何从 ScheduledFuture (ScheduledExecutorService) 列表中获取特定的 futureTask 并更新时间?
- java - Android:让片段在后台运行
- reactjs - 如何让一个 React 项目在 Docker 中运行?
- python - 过滤集合字典中的值
- python-3.x - ctypes 绑定调用引发分段错误
- javascript - 如何在另一个 if 语句中使用 if 语句中的变量值?