ul liでフィルタと検索のテキストをクリック

Question

liをクリックすると、divのデータは、選択したliのデータ値に基づいてフィルタリングする必要があります。これは動作していますが、何らかの理由で最初にページを読み込むときに、フィルタが機能するためにliを2回クリックする必要があります。何らかの理由で

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

あなたが最初のページをロードするとき、あなたは仕事へのフィルタの二倍のLiをクリックする必要があります。

これは、最初のクリックがclickイベントを添付して2番目のイベントが発生するためです。

あなたは、関数の外でイベントを添付する必要があり、あなたは、まったく機能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

あなたは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 3

代わりの

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

Answer 4

JSBINでのonClickを削除：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"); 
      });