Question

我有一个模态和事件链，看起来像这样，

$('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')，而不必在每个事件块中为其分配/创建引用。我知道我可以创建一个全局变量，但由于我不想污染全局命名空间，因此我试图避免这种情况。

Answer 1

基本上，我想知道的是，是否有一种方法可以在链中引用$（'div＃filter-modal'），而不必在每个事件块中为其分配/创建引用。

为了获取参考，您可以使用click事件处理程序的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>

链接事件作用域，是否可以访问根对象？

1 个答案: