が正しい日付をフィルタリングしていません。

Question

私は日付でフィルタリングする関数を作成しています。私はそれをクリックイベントで動作させましたが、ボタンとしてそれらを必要としません。これは選択肢でなければならない。私はあなたがするすべてのことは、クリックから「変更」にメソッドを変更することだと思いますが、それは機能していないようです。 「9月」（先月）のみが表示されます。

以下は、私が作った（私もコードを投稿することができます）「フィドル」です。 Jqueryオブジェクト内の 'クリック'とappendTo（$ options）のコメントを解除するとそれは動作するボタンをレンダリングします。

jqueryオブジェクト内で 'change'メソッドを使用することができるかどうかを知りたいと思います。どのように私は 'クリック'方法を使用しているように。

ありがとうございました。

enter code herehttps://jsfiddle.net/p689tk9q/2/

Answer 1

あなたの主な問題は、あなたのeach機能からtagNameが変更にハンドラ内に存在しないということでした。変更イベントが発生すると、イベントの起動者であった要素であるthisが与えられます。それがあなたの価値を引き出す必要がある場所です。

ループを通過するたびに、すべてのselect要素にイベントハンドラがアタッチされていました。だから、最後にループを通過したときに、9月の最後のtagNameにフィルタを設定するイベントハンドラがアタッチされました。

イベントハンドラを一度接続し、$(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に追加するときは、ページ上のすべての選択に追加します。現在のところ、あなたは1つしか持っていませんが、それは後であなたをかむ物のタイプです。私はそれを次のように変更しました：

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

最後に、私はすべてのデータを見ているときにすべてのオプションが選択されていなかったと私に迷惑をかけました。だから、私はそれをリストボックスに追加し、Allボタンが押されたときにリストを更新しました。

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

https://jsfiddle.net/hrsxb6wq/