vendredi 17 novembre 2017

jQuery multi-faceted filter issue.

I'm building a simple faceted filter to help users find the right condo. A few days ago I got a basic slider to filter out condos by square footage. The next part was getting the checkboxes to work which I posted to SO here and got some help from icecub. Since then I've been working on getting them to work in tandem (for example, checking 2 bedrooms and sliding the slider down to 800 sqft filters the condos by both variables). Got this to work yesterday.

The only issue I'm having is that now the slider only works when one of the two checkbox's are checked. If both or none are checked the slider doesn't work. I'm not sure exactly where my logic is flawed.

Here's a fiddle http://ift.tt/2AXGjQY

and here's the 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();
        });
      });

Aucun commentaire:

Enregistrer un commentaire