Javascript 通过单击过滤和搜索div文本

单击

li

时，应根据选定的

li

数据值过滤下面的

div

。这是可行的，但由于某些原因，当您第一次加载页面时，您必须单击

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>

1间卧室
2间卧室
全部

一居室
一居室
两间卧室
函数filterFloorplans（）
{
$（'.dropdown选项'）。单击（函数（）{
var theValue=$（this.attr（'data-value'）；
var rex=新的RegExp（值）；
如果（rex==“/all/”）{
clearFilter（）
}否则{
$（'.unit'）.hide（）；
$（'.unit'）.filter（函数（）{
返回rex.test（$（this.text（））；
}).show（）；
}
$（'.dropdown ul.on'）.removeClass（“on”）；
});
}
函数clearFilter（）
{
$（'.filterFloorplans'）.val（''）；
$（'.unit'）.show（）；
}
$（'.selectbeddrooms'）。单击（函数（）{
$（'.dropdown ul'）.toggleClass（“打开”）；
});

由于某些原因，当您第一次加载页面时，您必须单击两次li才能使过滤器工作

这是因为第一次单击将附加

单击

事件，第二次将触发它

您必须将事件附加到函数之外，并且根本不需要函数

filterFloorplans（）

，请删除

onClick

：

 onClick='filterFloorplans()'

并从函数中定义

单击
事件，检查下面的工作示例

希望这有帮助


$（函数（）{//ready函数
$（'.dropdown选项'）。单击（函数（）{
var theValue=$（this.attr（'data-value'）；
var rex=新的RegExp（值）；
如果（rex==“/all/”{clearFilter（）}其他{
$（'.unit'）.hide（）；
$（'.unit'）.filter（函数（）{
返回rex.test（$（this.text（））；
}).show（）；
}
$（'.dropdown ul.on'）.removeClass（“on”）；
});
函数clearFilter（）
{
$（'.filterFloorplans'）.val（''）；
$（'.unit'）.show（）；
}
$（'.selectbeddrooms'）。单击（函数（）{
$（'.dropdown ul'）.toggleClass（“打开”）；
});
});
。下拉列表{
宽度：100%；
边框：1px纯红；
光标：指针；
}


1间卧室
2间卧室
全部

一居室
一居室
两间卧室
您不需要
过滤器平面图
功能。
您的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>



1间卧室
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");
        });
    }

写

并移除ul元素中的onClick
JSBIN：


在发布代码之前，请先格式化一点。使用
$（文档）.on（'event'，'element'，function（e）{}）在点击中绑定点击是个坏主意。
$(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");
        });
    });

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

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