更改方法未过滤正确的日期

Question

我一直在研究按日期过滤的功能。我让它与点击事件一起工作，但我不需要它们作为按钮。它必须是 select 选项。我认为您要做的就是将方法从 click 更改为 'change' 但这似乎不起作用。它只会显示'September'（上个月）。

下面是我做的'fiddle'（我也可以post代码）。如果您在 jQuery 对象和 appendTo($options) 中取消注释 'click'。它将呈现按钮，这有效。

顺便说一句，我想知道是否或如何在 jQuery 对象中使用 'change' 方法。就像我如何使用 'click' 方法。

https://jsfiddle.net/p689tk9q/2/

Answer 1

您的主要问题是您的 each 函数中的 tagName 在更改处理程序中不存在。当更改事件被触发时，它被赋予 this，这是事件的发起者元素。这就是您需要从中获取价值的地方。

您的代码在每次循环时都将事件处理程序附加到所有 select 元素。因此，它最后一次通过循环时，它附加了一个事件处理程序，将过滤器设置为它看到的最后一个 tagName，即九月。

我们只需要附加事件处理程序一次，然后检查 $(this).val() 以查看在 select 中选择了什么。

      $.each(tagged, function(tagName) {
        $('<option/>', {
          text: tagName
        }).appendTo($selectOptions);
      });

       $selectOptions.on('change', function() {
          $eventDate
          .fadeOut()
          .filter(tagged[$(this).val()])
          .fadeIn();
      });

此外，您的 $selectOptions 已设置为 $('select')。当您将每个 tagName 附加到 $selectOptions 时，您将附加到页面上的每个 select。目前你只有一个，但那是后来咬你的东西。我将其更改为：

$selectOptions = $('#sort_month select'),

最后，当我看到所有数据时，没有一个 all 选项 selected 让我很烦恼。所以，我将它添加到列表框并在按下 All 按钮时更新了列表。我还添加了一个检查以使下拉列表中的所有工作。-

  $selectOptions.on('change', function() {
    if ($(this).val() == 'All') {
      $eventDate.fadeIn();
    } else {
      $eventDate
        .fadeOut()
        .filter(tagged[$(this).val()])
        .fadeIn();
    }
  });

https://jsfiddle.net/hrsxb6wq/

更改方法未过滤正确的日期

on change method not filtering the correct date

javascript

jquery

jquery-events