Question

我无法通过两个不同的输入使用jQuery过滤生成的div。用户可以决定按办公室，专业或办公室和专业进行过滤。过滤是根据div上与选择输入值对应的数据属性设置的。

<div>
  <label for="officeSearch">Search by office:</label>
  <select name="Office Search" id="officeSearch">
    <option value="all"></option>
    <option value="communication">Communication</option>
    <option value="internal medicine">Internal Medicine</option>
  </select>
</div>
<div>
  <label for="specialtySearch">Search by specialty:</label>
  <select name="Specialty Search" id="specialtySearch">
    <option value="all"></option>
    <option value="Bone Cancer">Bone Cancer</option>
    <option value="Breast Cancer">Breast Cancer</option>
    <option value="Oral Cancer">Oral Cancer</option>
  </select>
</div>

<div class="module-sm profile" data-office="communication" data-specialty="Oral Cancer">
  <p>Person A</p>
</div>
<div class="module-sm profile" data-office="communication" data-specialty="Breast Cancer">
  <p>Person B</p>
</div>
<div class="module-sm profile" data-office="internal medicine" data-specialty="Bone Cancer">
  <p>Person C</p>
</div>

这是我正在使用的jQuery，它会改变选择：

$(document).ready(function() {
  $("#officeSearch").on('change', function(){
    var selectedOffice = $('#officeSearch').val();
    var selectedSpecialty = $('#specialtySearch').val();
    var person = $('#filterList .profile').not('.out');
    var allPersons = $('#filterList .profile');
    var allPersonsOffice = $('#filterList .profile').data('office');
    var allPersonsOut = $('#filterList .profile.out');

    var office = $('.profile[data-office="' + selectedOffice +'"]');

    alert(''+ selectedOffice + ' ' + selectedSpecialty +'');

    if (selectedOffice == 'all' && selectedSpecialty == 'all'){
        $(allPersons).removeClass('out').fadeIn(500);
    }
    else {
        $(person).not(office).addClass('out').fadeOut(500);
        office.removeClass('out').fadeIn(500);
    }
  });
  $("#specialtySearch").on('change', function(){
    var selectedOffice = $('#officeSearch').val();
    var selectedSpecialty = $('#specialtySearch').val();
    var person = $('#filterList .profile').not('.out');
    var allPersons = $('#filterList .profile');
    var allPersonsOffice = $('#filterList .profile').data('office');
    var allPersonsOut = $('#filterList .profile.out');

    var specialty = $('.profile[data-specialty="' + selectedSpecialty +'"]');

    alert(''+ selectedOffice + ' ' + selectedSpecialty +'');

    if (selectedOffice == 'all' && selectedSpecialty == 'all'){
        $(allPersons).removeClass('out').fadeIn(500);
    }
    else {
        $(person).not(specialty).addClass('out').fadeOut(500);
        specialty.removeClass('out').fadeIn(500);
    }
  });
});

如果有帮助的话，我已经制作了一个codepen来展示我到底要做什么以及到目前为止我在哪里。

我已经做了一些搜索，并且一直在摸索如何让这个工作几周。非常感谢任何帮助使这些代码更简洁或其他人如何解决这个问题的例子！

Answer 1

从任一选择更改中调用单个更新。
根据选择（追加）创建过滤器。
隐藏不在比赛中的
显示比赛。

JSFiddle：http://jsfiddle.net/TrueBlueAussie/2u7NY/

$(document).ready(function () {
    var onChange = function () {

        var selectedOffice = $('#officeSearch').val();
        var selectedSpecialty = $('#specialtySearch').val();
        var filter = "#filterList .profile";
        var allPersons = $(filter);
        if (selectedOffice != "all")
        {
            filter += '[data-office="' + selectedOffice + '"]'
        }
        if (selectedSpecialty != "all")
        {
            filter += '[data-specialty="' + selectedSpecialty + '"]'
        }
        var $matching = allPersons.filter(filter);
        $(allPersons).not($matching).removeClass('out').fadeOut(500);
        $matching.removeClass('out').fadeIn(500);        
    }

    $("#officeSearch, #specialtySearch").on('change', onChange );
});

更新：http://jsfiddle.net/TrueBlueAussie/2u7NY/2/

＆＃34; #filterList .profile＆＃34;过滤器可以稍微提高效率。不需要根据属性过滤allPersons。

我还删除了函数变量，并将函数内联放在change事件上。

$(document).ready(function () {
    $("#officeSearch, #specialtySearch").on('change',
        function () {
            var selectedOffice = $('#officeSearch').val();
            var selectedSpecialty = $('#specialtySearch').val();
            var allPersons = $("#filterList .profile");
            var filter = "";
            if (selectedOffice != "all") {
                filter = '[data-office="' + selectedOffice + '"]'
            }
            if (selectedSpecialty != "all") {
                filter += '[data-specialty="' + selectedSpecialty + '"]'
            }
            var $matching = allPersons.filter(filter);
            $(allPersons).not($matching).removeClass('out').fadeOut(500);
            $matching.removeClass('out').fadeIn(500);
        });
});

Answer 2

行。尝试这样的事情......

var match = function(office, specialty, profile) {
    var show = ((office == 'all' || office == $(profile).data('office')) &&
               (specialty == 'all' || specialty == $(profile).data('specialty')));

    if (show && !$(profile).is(':visible')) {
        $(profile).fadeIn();
    }

    if (!show && $(profile).is(':visible')) {
        $(profile).fadeOut();
    }
}

var filter = function() {
    var selectedOffice = $('#officeSearch').val();
    var selectedSpecialty = $('#specialtySearch').val();

    $.each($('#filterList .profile'), function(i, profile) {
        match(selectedOffice, selectedSpecialty, profile);
    });
};

$("#officeSearch").on('change', function(){
    filter();
});
$("#specialtySearch").on('change', function(){
    filter();
});

在这里工作.... http://jsfiddle.net/6Q8FF/

jQuery通过两个选择输入按数据属性进行过滤

2 个答案:

JSFiddle：http://jsfiddle.net/TrueBlueAussie/2u7NY/

更新：http://jsfiddle.net/TrueBlueAussie/2u7NY/2/