Question

我一直在尝试为具有多个下拉菜单的客户端网站上的页面制作一些过滤器选项。我可以使它工作，但它会在我选择一个选项时重置过滤。我需要他们一起工作＆＃34;。这是为了过滤酒店的房间（不是很多房间）。

所以第一个下拉列表是可以放入房间的人数，然后是房间的类型，最后是房间/房屋的卧室数量。

用户可以使用所有3个下拉菜单来过滤他的结果，或者他只能使用1.无论他喜欢什么。他必须能够选择＆＃34; 3＆＃34;在第一个下拉列表中，它会过滤所有内容，仅显示最多为＆＃34; 3＆＃34;在结果框中。之后，如果他选择＆＃34;工作室＆＃34;在第二次下拉列表中，需要记住他已选择＆＃34; 3＆＃34;对于适合房间的人数，还要记住他刚刚选择了＃34;工作室＆＃34;现在，它应该显示最多可容纳3人的工作室。等

我想你明白了。这是我的HTML代码：

<select class="bedroom-min">
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
  <option value="5">5</option>
</select>

<select class="type">
  <option value="all">Select...</option>
  <option value="casitas">Casitas</option>
  <option value="studios">Studios</option>
  <option value="dorm">Dorm</option>
</select>

<select class="bedrooms">
  <option value="all">Select...</option>
  <option value="1">1 bedroom</option>
  <option value="2">2 bedrooms</option>
</select>

<div class="property-load-section">
  <div class="property-item" data-bedrooms="5" data-type="casitas" data-bed="1">Room #529</div>
  <div class="property-item" data-bedrooms="4" data-type="studios" data-bed="2">Room #737</div>
  <div class="property-item" data-bedrooms="3" data-type="dorm" data-bed="2">Room #123</div>
  <div class="property-item" data-bedrooms="2" data-type="studios" data-bed="2">Room #126</div>
  <div class="property-item" data-bedrooms="1" data-type="casitas" data-bed="1">Room #523</div>
</div>

这里是jQuery代码：

//Filtering for number of person that can sleep in that room
$("select").change(function() {
  var minValue = $('select.bedroom-min').val();
  $('.property-load-section').find('.property-item').filter(function () {
    return $(this).attr('data-bedrooms') < minValue;
  }).fadeOut('fast');
  $('.property-load-section').find('.property-item').filter(function () {
    return $(this).attr('data-bedrooms') >= minValue;
  }).fadeIn('fast');
});

//Filtering for type of rooms
$("select.type").change(function() {
    var roomType = $('select.type').val();
  $('.property-load-section').find('.property-item').filter(function () {
    return $(this).attr('data-type') != roomType;
  }).fadeOut('fast');
});

//Filtering for the number of bedrooms
$("select.bedrooms").change(function() {
    var roomBed = $('select.bedrooms').val();
  $('.property-load-section').find('.property-item').filter(function () {
    return $(this).attr('data-bed') != roomBed;
  }).fadeOut('fast');
});

这是CodePen链接：https://codepen.io/anon/pen/bRxXVK?editors=1010

任何人都可以帮我解决这个问题吗？我对javascript / jQuery很新。非常感谢

Answer 1

我建议为每个select的更改事件执行相同的逻辑，在该逻辑中，您应该一次检查所有三个过滤选项。在 type 和卧室的情况下，还应考虑值"all"，因为它是一个特殊值，不等于{{1你设置的属性。

这就是说修改后的JavaScript代码：

data-

CodePen link。

Answer 2

看看这个小提琴 - https://jsfiddle.net/pjz958n6/。

//call the same function for each select's change event
$("select.bedroom-min, select.type, select.bedrooms").change(updateRooms);

function updateRooms() {
  //get all the values
  var minValue = $('select.bedroom-min').val();
  var roomType = $('select.type').val();
  var roomBed = $('select.bedrooms').val();

  $('.property-load-section')
    .find('.property-item')
    .hide()
    .filter(function () {
      var okMinBedrooms = $(this).attr('data-bedrooms') >= minValue;

      var okRoomType = true;
      if(roomType !== "all"){
        okRoomType = $(this).attr('data-type') === roomType;
      }

      var okRoomBed = true;
      if(roomBed !== "all"){
        okRoomBed = $(this).attr('data-bed') === roomBed;
      }

      //only fade a room if it satisfies all three conditions
      return okMinBedrooms && okRoomType && okRoomBed;
  }).fadeIn('fast');
}

您需要做的只是评估所有$("select").change(function() { var minValue = $('select.bedroom-min').val(); var roomType = $('select.type').val(); var roomBed = $('select.bedrooms').val(); $('.property-load-section').find('.property-item').filter(function () { return $(this).attr('data-bedrooms') < minValue || ($(this).attr('data-type') != roomType || roomType == "all") || ($(this).attr('data-bed') != roomBed || roomBed == "all"); }).fadeOut('fast'); $('.property-load-section').find('.property-item').filter(function () { return $(this).attr('data-bedrooms') >= minValue && ($(this).attr('data-type') == roomType || roomType == "all") && ($(this).attr('data-bed') == roomBed || roomBed == "all"); }).fadeIn('fast'); });选项的变化。与select类似，只需要fade-out与||中的&&相反。

Answer 3

以下是修复的JavaScript代码或JsFiddle：

$(document).ready(function(){

    // Once document is ready

    // Reference to dropdowns
    var ddlRooms = $('select.bedroom-min');
    var ddlType = $('select.type');
    var ddlBedRooms = $('select.bedrooms');

    // Hook up event handler for change event
    ddlRooms.change( doFilter );
    ddlType.change( doFilter );
    ddlBedRooms.change( doFilter );

    // Start with initial filtering
    doFilter();

    function doFilter(){

        // Start with hiding all property item
        $('.property-load-section > .property-item').hide();

        // Get the selected values
        var selectedRooms = parseInt(ddlRooms.val());
        var selectedType = ddlType.val();
        var selectedBedRooms = ddlBedRooms.val();


        // Get items matching rooms
        var matched = $('.property-load-section').find('.property-item').filter(function () {

            // Current property item
            var curPropertyItem = $(this)

            var curPropertyRooms = parseInt(curPropertyItem.attr('data-bedrooms'))
            var curPropertyType = curPropertyItem.attr('data-type');
            var curPropertyBeds = curPropertyItem.attr('data-bed');

            //console.log('Rooms matched: ' + roomMatched());
            //console.log('Type matched: ' + roomTypMatched());
            //console.log('Beds matched: ' + bedsMatched())

            return ( roomMatched() && roomTypMatched() && bedsMatched() );

            function roomMatched(){
                return curPropertyRooms >= selectedRooms;
            }

            function roomTypMatched(){
                if ( selectedType === 'all' ){
                    return true;
                }
                else if( curPropertyType === selectedType ){
                    return true;
                }
                else{
                    return false;
                }
            }

            function bedsMatched(){

                if( selectedBedRooms === 'all' ){
                    return true;
                }
                else if ( curPropertyBeds === selectedBedRooms ){
                    return true;
                }
                else{
                    return false;
                }
            }           
        });

        // Show matched property
        //console.log('Matched items: ' + matched.length);
        matched.show();
    }   
})

使用jQuery过滤＆＃34;找到＆＃34;和＆＃34;过滤＆＃34;有多个下拉菜单

3 个答案: