Фильтруйте и ищите текст div по ul li click

Question

Когда вы нажимаете li, divниже должны быть отфильтрованы на основе выбранного li значения данных. Это работает, но по какой-то причине, когда вы впервые загружаете страницу, вы должны нажать li дважды, чтобы фильтр работал.

Пример кода

<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

по какой-то причине, когда вы впервые загружаете страницу, вам нужно дважды щелкнуть li, чтобы фильтр заработал.

Это потому, что первый щелчок прикрепит click событие и второе запустят его.

Вы должны прикрепить событие за пределами функции, и вам не нужна функция filterFloorplans() вообще убери onClick:

 onClick='filterFloorplans()'

И определить click событие вне функции, проверьте рабочий пример ниже.

Надеюсь это поможет.

$(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

Вместо

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");
        });
    }

Написать

$(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");
        });
    });

и удалите onClick в элементе ul

Answer 3

Вам не нужно filterFloorPlans функция. Ваш JS будет выглядеть так:

$(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");
    });
});

И ваш 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>

Вы можете увидеть здесь: 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");
            });