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事件，请查看下面的工作示例。

希望这有帮助。

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

通过ul li点击过滤和搜索div文本

4 个答案: