Question

我希望我能解释这个权利。我正在构建一个书签应用程序，用户可以在其中存储指向他们喜欢的网站的链接，并给他们1-5星的评分。有一个下拉菜单，用户可以选择仅显示具有4星及以上评级，3星及以上评级的书签等。我知道我必须执行某种条件或不平等声明，但是我不知道该怎么说：“当我单击该特定选项时，我想过滤我的书签数组并在页面上显示过滤的项目。”我的问题不是筛选部分，而是如何实际定位下拉菜单中的选项。我正在尝试使用jQuery

完成此操作

HTML下拉菜单：

<div class="filter-menu">
        <select id="dropdown" name="rating">
            <option disabled value></option>Filter by rating:</option>
            <option value=5>5 stars</option>
            <option value=4>4 stars & above</option>
            <option value=3>3 stars & above</option>
            <option value=2>2 stars & above</option>
            <option value=1>1 star & above</option>
        </select>
    </div>

JS：

function handleRatingFilter(value){
    $('.filter-menu').on('click', '#dropdown', event => {
      event.preventDefault();
      console.log('dropdown menu option clicked!');

      if (value === 1){
        const bookmarks = STORE.list.filter(bookmark => bookmark.rating >= 1);
        return bookmarks;
      }
      renderStore();
    });
  }

很明显，我的功能无法正常工作，可能完全关闭了，但这是我的出发点和逻辑。

Answer 1

$(document).ready(function() {
  $('.filter-menu').on('click', '#dropdown', event => {
    event.preventDefault();
    console.log('dropdown menu option clicked!');

    var value = $(this).val(); // Here to get value
    if (value === 1){
      const bookmarks = STORE.list.filter(bookmark => bookmark.rating >= 1);
      return bookmarks;
    }
    renderStore();
  });
});

Answer 2

  function handleRatingFilter(){
        $('.filter-menu').on('change', '#dropdown', event => {
            event.preventDefault();
            console.log('dropdown menu option clicked!');
            const value = event.currentTarget.value;
            if (value === 1){
                const bookmarks = STORE.list.filter(bookmark => bookmark.rating >= 1);
                return bookmarks;
            }
            renderStore();
        });
    }

按评分下拉菜单过滤

2 个答案: