Question

我一直在研究按日期过滤的功能。我得到了一个点击事件，但我不需要它们作为按钮。它必须是一个选择选项。我认为你所要做的就是将方法从点击更改为'更改'，但这似乎不起作用。它只显示'九月'（上个月）。

下面是我做的'小提琴'（我也可以发布代码）。如果取消注释Jquery对象内的'click'并追加toTo（$ options）。它将呈现按钮，这是有效的。

除此之外，我想知道是否或如何在jquery对象中使用'change'方法。就像我使用'click'方法一样。

感谢。

enter code here https://jsfiddle.net/p689tk9q/2/

Answer 1

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

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

我们只需要附加一次事件处理程序，然后检查$(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时，您会附加到页面上的每个选项。目前你只有一个，但这是后来咬你的东西。我改成了：

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

最后，它告诉我，当我看到所有数据时，没有选择所有选项。因此，我将其添加到列表框中，并在按下“全部”按钮时更新列表。我还添加了一个检查，以便从下拉菜单中进行所有工作.-

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

question

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

1 个答案: