在我的 HTML 中,我有一组id
遵循表单的输入entry-<count>
。帖子有自己的删除按钮(删除),这会显示一个 Bootstrap 4 模式窗口;这个窗口有一个删除条目的确认(是)和一个取消按钮。这个模态窗口用于确认所有条目的删除,一次一个,我通过使用data-entry-number
按钮按下属性来实现,该属性也用于控制模态的Yesdata-target
button的值。
通常,根据相关输入更新属性和模式,可以正常工作(请参阅 JavaScript 说明#delete-modal
);但是,删除条目和更新参数的语句只工作一次(第一次清除条目时)。
从浏览器中,您可以看到文本span
#entry-number
和是data-target
按钮( ) 是如何正确更新的,理论上这将允许根据按下的删除按钮正确删除任何条目,但在 Javascript 控制台中,一旦第一次输入,当打印变量的值,得到第一个消除的输入对应的值,这样后面的就不会消除了。在这里,我留下示例此操作的代码。#delete-confirm
entry_target
怎么了?我不是 Javascript 方面的专家,看到 DOM 正在发生变化,而且指令似乎没有看到这些变化,这让我很困惑。:) 我很想看到一个答案,它不仅可以帮助我解决问题,还可以解释我所缺少的基础知识(希望不会太多)。
$('#delete-modal').on('show.bs.modal', function (e) {
var $button = $(e.relatedTarget);
var entry_number = $button.data('entry-number');
$(this).find('#entry-num').text(entry_number);
$(this).find('#delete-confirm').attr('data-target', '#entry-' + entry_number);
}).on('hide.bs.modal', function () {
$(this).find('#entry-num').text('');
$(this).find('#delete-confirm').attr('data-target', '');
});
$('#delete-confirm').on('click', function () {
var entry_target = $(this).data('target');
var $target = $(entry_target);
$target.remove();
$('#delete-modal').modal('hide');
});
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<title>Test</title>
</head>
<body>
<h1>Test Buttons</h1>
<div id="entry-1">
<h3>Entry 1</h3>
<p>Text of entry 1</p>
<button data-entry-number="1" class="btn btn-outline-danger " type="button" aria-label="Delete" data-toggle="modal" data-target="#delete-modal" title="Delete">
Delete
</button>
</div>
<hr>
<div id="entry-2">
<h3>Entry 2</h3>
<p>Text of entry 2</p>
<button data-entry-number="2" class="btn btn-outline-danger " type="button" aria-label="Delete" data-toggle="modal" data-target="#delete-modal" title="Delete">
Delete
</button>
</div>
<div class="modal fade" id="delete-modal" tabindex="-1" role="dialog" aria-labelledby="modalTitle"
aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="modalTitle">Delete entry?</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
Are your sure you want to delete the entry number <span id="entry-num"></span>?
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
<button id="delete-confirm" data-target="" type="button" class="btn btn-danger">Yes</button>
</div>
</div>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<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>
</body>
</html>
转了几圈后,我找到了对您问题的解释。总而言之,数据函数没有设置 的值
data-target
,因此在事件中$('#delete-confirm').on('click')
,当您这样做时,var entry_target = $(this).data('target');
您将获得第一个元素的数据目标。要解决它,您必须使用函数获取数据目标attr()
var entry_target = $(this).attr('data-target');
(实际上show.bs.modal
,您已经很好地分配了它attr()
)