javascript - 通过 ul li click 过滤和搜索 div 文本

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

并删除 ul 元素中的 onClick

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