gpt4 book ai didi

javascript - 链式事件范围,是否可以访问根对象?

转载 作者:行者123 更新时间:2023-12-03 01:16:29 24 4
gpt4 key购买 nike

我有一个如下所示的模式和事件链,

$('div#filter-modal').modal({
backdrop: true,
keyboard: true,
show: false
}).on('click', 'button.add-filter', function(e) {

console.log($(this));
var gridIDX = $(this).data('grid_idx');
console.log('Add Filter: ' + gridIDX);

}).on('click', 'button.add-filter-next', function(e) {

console.log($(this));
var gridIDX = $(this).data('grid_idx');
console.log('Add Filter Next: ' + gridIDX);

}).on('click', 'button.remove-filter', function(e) {

console.log($(this));
var gridIDX = $(this).data('grid_idx');
console.log('Remove Filter: ' + gridIDX);

}).on('show.bs.modal', function(e) {
$('select.filter-type', this).hide();
$('input.filter-term', this).hide();
// console.log('Showing Modal');
}).on('shown.bs.modal', function(e) {
var gridIDX = $(this).data('grid_idx');
console.log(gridIDX);
ko_grid.tarGrid(gridIDX);

}).on('hide.bs.modal', function(e) {

console.log('Hiding Modal');
}).on('hidden.bs.modal', function(e) {
$('div#filter-modal').removeData('grid_id');
$('div#filter-modal').removeData('grid_idx');
console.log('Modal Hidden');
});

是否有关键字或方法将作用域变量传递到链式事件处理程序中?

本质上我想知道的是是否有一种方法可以在链中引用 $('div#filter-modal') 而不必在每个中分配/创建对它的引用事件 block 。我知道我可以创建一个全局的,但我试图避免这种情况,因为我不想污染全局命名空间。

最佳答案

Essentially what I would like to know is if there is a method to reference $('div#filter-modal') in the chain without having to assign/create a reference to it in every event block.

为了获得引用,您可以使用 currentTarget点击事件处理程序的属性:

e.originalEvent.currentTarget

$('div#filter-modal').modal({
backdrop: true,
keyboard: true,
show: false
}).on('click', 'button.add-filter', function(e) {
console.log(e.originalEvent.currentTarget.id);
var gridIDX = $(this).data('grid_idx');
console.log('Add Filter: ' + gridIDX);
}).on('click', 'button.add-filter-next', function(e) {
console.log(e.originalEvent.currentTarget.id);
var gridIDX = $(this).data('grid_idx');
console.log('Add Filter Next: ' + gridIDX);
}).on('click', 'button.remove-filter', function(e) {
console.log(e.originalEvent.currentTarget.id);
var gridIDX = $(this).data('grid_idx');
console.log('Remove Filter: ' + gridIDX);
}).on('show.bs.modal', function(e) {
$('select.filter-type', this).hide();
$('input.filter-term', this).hide();
// console.log('Showing Modal');
}).on('shown.bs.modal', function(e) {
var gridIDX = $(this).data('grid_idx');
//console.log(gridIDX);
//ko_grid.tarGrid(gridIDX);
}).on('hide.bs.modal', function(e) {
console.log('Hiding Modal');
}).on('hidden.bs.modal', function(e) {
$('div#filter-modal').removeData('grid_id');
$('div#filter-modal').removeData('grid_idx');
console.log('Modal Hidden');
});
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#filter-modal">
Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="filter-modal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary add-filter" data-dismiss="modal">add-filter</button>
<button type="button" class="btn btn-secondary remove-filter" data-dismiss="modal">remove-filter</button>
<button type="button" class="btn btn-primary add-filter-next">add-filter-next</button>
</div>
</div>
</div>
</div>

关于javascript - 链式事件范围,是否可以访问根对象?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51992351/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com