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

Question

当您点击 li 时，下面的 div 应该根据所选的 li 数据值进行过滤。这是有效的，但由于某种原因，当您第一次加载页面时，您必须单击 li 两次才能使过滤器工作。

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.

因为第一次点击会附加 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>