Question

我对JS的这些新东西。

代码具有显示具有特定内容（ALL，A，B，C）的项目的功能。

代码适用于按钮，但我无法使按钮在“下拉菜单选择”帮助下工作。

       I was trying to make this work, but it dosent:/

    <select class="dropdown-select" id="portfolio-sort">
      <option><a href="#" id="all">ALL</a></option>
      <option><a href="#" data-cat="a">A</a></option>
      <option><a href="#" data-cat="b">B</a></option>
      <option><a href="#" data-cat="c">C</a></option>
    </select>

Answer 1

您遇到的问题是您尝试在选择选项中添加链接。那不会起作用。

以下是您需要的解决方案：

<强> JS

var Portfolio = {
    sort: function(items) {
        items.show();
        $('#portfolio-content').find('div.portfolio-item').not(items).fadeOut(300);
    },
    showAll: function(items) {
        items.fadeIn(300);
    },
    doSort: function() {
        $('#portfolio-select').on('change', function() {
              var val = $(this).find(':selected').data('cat')
              if (val != undefined)  {      // it will be `undefined` for `all` because there is no `data-cat` on that object
                    var items = $('div[data-cat=' + val + ']', '#portfolio-content');
                    Portfolio.sort(items);
              } else {
                    Portfolio.showAll($('div.portfolio-item', '#portfolio-content'));
              }
        });
    }
};

Portfolio.doSort();

<强> HTML

<div id="portfolio">


<div id="portfolio-sort">
      <select id="portfolio-select">
          <option id="all">ALL</option>
          <option data-cat="a">A</option>
          <option data-cat="b">B</option>
          <option data-cat="c">C</option>
      </select>
</div>

<div id="portfolio-content">
    <div class="portfolio-item" data-cat="a">A</div>
    <div class="portfolio-item" data-cat="b">B</div>
    <div class="portfolio-item" data-cat="c">C</div>
    <div class="portfolio-item" data-cat="c">C</div>
    <div class="portfolio-item" data-cat="b">B</div>
    <div class="portfolio-item" data-cat="a">A</div>
    <div class="portfolio-item" data-cat="a">A</div>
    <div class="portfolio-item" data-cat="c">C</div>
    <div class="portfolio-item" data-cat="b">B</div>
</div>

JS下拉选择

1 个答案: