通过ul li筛选和搜索div文本，请单击

Question

When you click the li , the div 's below should be filtered based on the selected li data values. This is working but for some reason, when you first load the page you have to click an li twice for the filter to work.

Codepin Example

<div class="dropdown">
    <a href="javascript:;" class="btn dropbtn selectBedrooms">select bedrooms <span class="icon downarrow"></span></a>

    <ul id='filterFloorplans' onClick='filterFloorplans()' class="btn dropbtn">
        <li data-value="1" class="dropdown-option">1 Bedroom</li>
        <li data-value="2" class="dropdown-option">2 Bedrooms</li>
        <li data-value="all" class="dropdown-option">all</li>
    </ul>
</div>

<div class="floorplanscontainer">
    <div class="unit">1 bedroom</div>
    <div class="unit">1 bedroom</div>
    <div class="unit">2 bedrooms</div>
</div>


<script>

    function filterFloorplans()
    {
        $('.dropdown-option').click(function () {
            var theValue = $(this).attr('data-value');

            var rex = new RegExp(theValue);

            if(rex =="/all/"){
                clearFilter()
            }else{
                $('.unit').hide();

                $('.unit').filter(function() {
                    return rex.test($(this).text());
                }).show();
            }
             $('.dropdown ul.on').removeClass("on");
        });
    }

    function clearFilter()
    {
        $('.filterFloorplans').val('');
        $('.unit').show();
    }

    $('.selectBedrooms').click(function () {
        $('.dropdown ul').toggleClass("on");
    });

</script>

Answer 1

for some reason, when you first load the page you have to click an li twice for the filter to work.

That because the first click will attach the click event and second will fire it.

You have to attach the event outside of the function and you don't need the function filterFloorplans() at all, remove the onClick :

 onClick='filterFloorplans()'

And define the click event out of the function, check the working example below.

Hope this helps.

 $(function(){ //ready function $('.dropdown-option').click(function () { var theValue = $(this).attr('data-value'); var rex = new RegExp(theValue); if(rex =="/all/"){clearFilter()}else{ $('.unit').hide(); $('.unit').filter(function() { return rex.test($(this).text()); }).show(); } $('.dropdown ul.on').removeClass("on"); }); function clearFilter() { $('.filterFloorplans').val(''); $('.unit').show(); } $('.selectBedrooms').click(function () { $('.dropdown ul').toggleClass("on"); }); }); 

 .dropdown ul li { width:100%; border:1px solid red; cursor: pointer; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="dropdown"> <a href="javascript:;" class="btn dropbtn selectBedrooms">select bedrooms <span class="icon downarrow"></span></a> <ul id='filterFloorplans' class="btn dropbtn"> <li data-value="1" class="dropdown-option">1 Bedroom</li> <li data-value="2" class="dropdown-option">2 Bedrooms</li> <li data-value="all" class="dropdown-option">all</li> </ul> </div> <div class="floorplanscontainer"> <div class="unit">1 bedroom</div> <div class="unit">1 bedroom</div> <div class="unit">2 bedrooms</div> </div> 

Answer 2

Instead of

function filterFloorplans()
    {  
        // var rex = new RegExp($('#filterFloorplans').val());
        $('.dropdown-option').click(function () {
            var theValue = $(this).attr('data-value');

            var rex = new RegExp(theValue);

            if(rex =="/all/"){clearFilter()}else{
                    $('.unit').hide();
                    $('.unit').filter(function() {
                    return rex.test($(this).text());
                    }).show();
                }
             $('.dropdown ul.on').removeClass("on");
        });
    }

Write

$(function()
    {  
        // var rex = new RegExp($('#filterFloorplans').val());
        $('.dropdown-option').click(function () {
            var theValue = $(this).attr('data-value');

            var rex = new RegExp(theValue);

            if(rex =="/all/"){clearFilter()}else{
                    $('.unit').hide();
                    $('.unit').filter(function() {
                    return rex.test($(this).text());
                    }).show();
                }
             $('.dropdown ul.on').removeClass("on");
        });
    });

and remove the onClick in the ul element

Answer 3

You don't need the filterFloorPlans function. Your JS would be like this:

$(function() {
   $('.dropdown-option').click(function () {
      var theValue = $(this).attr('data-value');

      var rex = new RegExp(theValue);

      if(rex =="/all/"){clearFilter()}else{
        $('.unit').hide();
        $('.unit').filter(function() {
          return rex.test($(this).text());
        }).show();
      }
      $('.dropdown ul.on').removeClass("on");
    });

    function clearFilter()
    {
      $('.filterFloorplans').val('');
      $('.unit').show();
    }

    $('.selectBedrooms').click(function () {
      $('.dropdown ul').toggleClass("on");
    });
});

And your HTML:

<div class="dropdown">
  <a href="javascript:;" class="btn dropbtn selectBedrooms">select bedrooms <span class="icon downarrow"></span></a>
  <ul id='filterFloorplans' class="btn dropbtn">
    <li data-value="1" class="dropdown-option">1 Bedroom</li>
    <li data-value="2" class="dropdown-option">2 Bedrooms</li>
    <li data-value="all" class="dropdown-option">all</li>
  </ul>
</div>

<div class="floorplanscontainer">
  <div class="unit">1 bedroom</div>
  <div class="unit">1 bedroom</div>
  <div class="unit">2 bedrooms</div>
</div>

You can see here: http://codepen.io/anon/pen/XjzKkO

Answer 4

JSBIN : JSBIN

 <div class="dropdown">
          <a href="javascript:;" class="btn dropbtn selectBedrooms">select bedrooms <span class="icon downarrow"></span></a>
          <ul id='filterFloorplans' onClick='filterFloorplans()' class="btn dropbtn">
            <li data-value="1" class="dropdown-option">1 Bedroom</li>
            <li data-value="2" class="dropdown-option">2 Bedrooms</li>
            <li data-value="all" class="dropdown-option">all</li>
          </ul>

        </div>

JAVASCRIPT

$('ul li').on('click',function(e){
  e.preventDefault();
  var theValue = $(this).attr('data-value');
  var rex = new RegExp(theValue);

                if(rex =="/all/"){
                   $('.filterFloorplans').val('');
                $('.unit').show();
                                 }else{
                        $('.unit').hide();
                        $('.unit').filter(function() {
                        return rex.test($(this).text());
                        }).show();
                    }
                 $('.dropdown ul.on').removeClass("on");
})
$('.selectBedrooms').click(function () {
                $('.dropdown ul').toggleClass("on");
            });