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

Question

我一直在开发一个按日期过滤的函数。我让它与点击事件一起工作，但我不需要它们作为按钮。它必须是一个选择选项。我认为您要做的就是将方法从单击更改为“更改”，但这似乎不起作用。它只会显示“九月”(最后一个月)。

下面是我制作的一个“ fiddle ”(我也可以发布代码)。如果您取消注释 jQuery 对象内的“click”和 appendTo($options)。它将呈现按钮，这是有效的。

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

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

Answer 1

你的主要问题是tagName来自您的each函数不存在于更改处理程序中。当更改事件被触发时，它给出 this ，这是事件的煽动者。这就是你需要从中获取值(value)的地方。

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

我们只需附加事件处理程序一次，然后检查 $(this).val()查看选择中选择的内容。

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

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

还有，你的$selectOptions设置为$('select') 。当您附加每个 tagName 时至$selectOptions ，您将附加到页面上的每个选择。目前你只有一个，但这就是以后咬你的东西。我将其更改为:

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

最后，当我看到所有数据时，没有选择所有选项，这让我很烦恼。因此，我将其添加到列表框中，并在按下“全部”按钮时更新列表。我还添加了一个检查，以使所有工作都从下拉列表中进行。-

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

https://jsfiddle.net/hrsxb6wq/