Question

我已经抽象了一些jQuery代码来处理我的应用程序中的表的过滤。通常，用户单击链接并显示或隐藏某些表行。代码如下：

var filters = $('ul.filters');
var filtersCount = filters.children().length;
if (filtersCount > 2) {
  filters.children(':last-child').css({
    'right':'1px'
  })
}
var target = filters.data('target');

$('a.filter').on('click', function() {
  filters.children().removeClass('active');
  $('.filterable').hide();
  var $this = $(this);
  $this.parents('li').addClass('active');
  var visibleStates = $this.data('include-filter').split(" ");
  $(visibleStates).each(function(index,state) {
    if (state == "all") {
      $('.filterable').show();
    } else {
      $('.filterable' + '.' + state).show();
    }
  })
  if ($this.data('exclude-filter') !== undefined) {
    var hiddenStates = $this.data('exclude-filter').split(" ");
    $(hiddenStates).each(function(index,state) {
      $('.filterable' + '.' + state).hide();
    })
  }
})

此代码在我的应用程序中的五个位置使用，并在其中四个中使用。通过逐步执行，我知道代码确实有效，因为它过滤了元素，但最终隐藏了页面上的所有“.filterable”元素。我已经执行了jQuery的这部分代码的执行：

if ( ret !== undefined ) {
  if ( (event.result = ret) === false ) {
    event.preventDefault();
    event.stopPropagation();
  }
}

导致隐藏“.filterable”行的行是：

ret = ( (jQuery.event.special[ handleObj.origType ] || {}).handle || handleObj.handler ).apply( matched.elem, args );

最终，执行在此行停止：

return event.result;

如果我在控制台中查看它，则

event.result未定义。 Javascript并不是我的专业领域，所以如果有人能给我一个正确的方向，我将不胜感激。

修改

我已经将最简单的代码添加到我的表中，如下所示，结果相同。无论我点击哪个过滤器链接，这两行都是隐藏的，不会重新出现。

<tbody>
  <tr class="filterable paid-sick-leave">
    <td>From</td>
    <td>To</td>
  </tr>
  <tr class="filterable paid-annual-leave">
    <td>From</td>
    <td>To</td>
  </tr>
</tbody>

过滤器看起来像这样。 Ruby代码打印出缺席类别的描述，下载它并用连字符替换空格。

<ul class="filters">
  <li class="active">
    <a href="javascript:;" class="filter" data-include-filter="all">All Absences</a>
  </li>
  <% @absence_categories.each do |ac| %>
    <li>
      <a href="javascript:;" class="filter" data-include-filter="<%= ac.description.downcase.gsub(' ','-') %>"><%= ac.description %></a>
    </li>
  <% end %>
</ul>

Answer 1

这意味着＆＃34; event.result＆＃34;在您需要在控制台脚本中进行调试后，您需要测试您的事件单击是否仍然存在，因为应用程序一步一步可能是由于没有引用类或html引起的错误。

Answer 2

更改此点击事件，如下所示：

$(document).on('click','a.filter', function() {
  filters.children().removeClass('active');
  $('.filterable').hide();
  var $this = $(this);
  $this.parents('li').addClass('active');
  var visibleStates = $this.data('include-filter').split(" ");
  $(visibleStates).each(function(index,state) {
    if (state == "all") {
      $('.filterable').show();
    } else {
      $('.filterable' + '.' + state).show();
    }
  })
  if ($this.data('exclude-filter') !== undefined) {
    var hiddenStates = $this.data('exclude-filter').split(" ");
    $(hiddenStates).each(function(index,state) {
      $('.filterable' + '.' + state).hide();
    })
  }
})

为什么这个jQuery不能在一个地方工作？

2 个答案: