javascript - jQuery 多面过滤器问题。

Question

我正在构建一个简单的多面过滤器来帮助用户找到合适的公寓。几天前，我得到了一个基本的 slider ，可以按平方英尺过滤出公寓。下一部分是让我发布到 SO here 的复选框起作用并从 icecub 那里得到了一些帮助。从那时起，我一直致力于让他们协同工作(例如，检查 2 个卧室并将 slider 向下滑动到 800 平方英尺，通过两个变量过滤公寓)。昨天得到这个工作。

我遇到的唯一问题是，现在 slider 仅在选中两个复选框之一时才起作用。如果两者都被选中或均未选中，则 slider 不起作用。我不确定我的逻辑到底在哪里有缺陷。

这是一把 fiddle https://jsfiddle.net/baskinco/mwqkztn8/

这是 JS

      // FUNCTIONS
      //make slider textbox equal to slider value
      function printValue(sliderID, textbox) {
        var x = document.getElementById(textbox);
        var y = document.getElementById(sliderID);
        x.value = y.value;
      }

      //get bdrm and slider values
      function getValues() {
        var bdrm1 = false;
        var bdrm2 = false;
        var sliderValue;

        if($("#1bdrm").is(':checked')){
          bdrm1 = true;
        }
        if ($("#2bdrm").is(':checked')){
          bdrm2 = true;
        }
        sliderValue = $("#rangeValue").val();

        runFilter(bdrm1, bdrm2, sliderValue);
      }

      function runFilter(bdrm1, bdrm2, sliderValue) {
        $.each($('.condo-box'), function() {
          $this = $(this);
          condoData = $this.data();
          if(bdrm1 && !bdrm2){
            if ((condoData.bdrms == 1) && (condoData.sqft <= sliderValue)){
              $this.show();
            } else {
              $this.hide();
            }
          } else if(bdrm2 && !bdrm1){
            if ((condoData.bdrms == 2) && (condoData.sqft <= sliderValue)){
              $this.show();
            } else {
              $this.hide();
            }
          } else {
            $this.show();
          }
        });
      }

      // Set values for units
      $('#jackson').data({ 
         id:1, 
         sqft:897, 
         bdrms:2 
      });
      $('#nicholl').data({ 
         id:2, 
         sqft:808, 
         bdrms:2 
      });
      $('#atwood').data({ 
         id:3, 
         sqft:1020, 
         bdrms:2 
      });
      //etc

    //MAIN SCRIPT
      $(document).ready(function() {
        //print slider value to slider textbox
        printValue('slider','rangeValue');

        //when a bdrm box is checked ..
        $("#1bdrm, #2bdrm").click(function(){
          getValues();
        });

        //when the slider is moved
        $("#slider").change(function() {
          getValues();
        });
      });

Answer 1

您的 else 条件不是检查 sqft 和 slider ，它应该是:

else {
    if ((condoData.sqft <= sliderValue)){
        $this.show();
    } else {
        $this.hide();
    }
}

https://jsfiddle.net/mwqkztn8/1/

或者，更简单地说，整个事情可以是:

$.each($('.condo-box'), function() {
     $this = $(this);
     condoData = $this.data();
     var sqftFilter = (condoData.sqft <= sliderValue);
     var bedFilter = (!bdrm1 && !bdrm2) || (condoData.bdrms == 1 && bdrm1) || (condoData.bdrms == 2 && bdrm2);
     $this.toggle(sqftFilter && bedFilter);
});

https://jsfiddle.net/mwqkztn8/3/