jQuery过滤器使用按钮和输入字段

时间:2019-03-07 12:27:07

标签: jquery html

所以我一直在努力做到这一点,但我不知道该怎么做。 是否可以使用按钮和输入字段过滤div?

就像我选择显示美国,在输入中选择柏林,它不应该显示任何内容,因为没有div包含美国和柏林..如果我选择意大利,则在输入中罗马显示了我和两个...等等

谢谢

$(document).ready(function(){
    var $btns = $('.mybtn').click(function() {
        if (this.id == 'all') {
          if($("#parent > div").is(":hidden")){
            $('#parent > div').fadeIn(450);
          }    
            else{
            $("#parent > div").hide();
          }
        } else {        
          if($("#parent > div."+this.id).is(":hidden")){
            $("#parent > div."+this.id).fadeIn(450);
          } else{
            var $el = $('.' + this.id).fadeIn(450);
            $('#parent > div').not($el).hide();
          }
        }
        $btns.removeClass('active');
        $(this).addClass('active');
      })
})
.mydiv {
    border: 2px solid red;
    margin: 5px;
    padding: 10px;
}

.mybtn {
    background-color: red;
    color: white;
    border: 0px;
    margin: 10px;
}

input {
    width: 200px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
    <button id="all" class=mybtn>Show All</button>
    <button id="germnay" class=mybtn>Show Gremany</button>
    <button id="usa" class=mybtn>Show USA</button>
    <button id="france" class=mybtn>Show France</button>
    <button id="italy" class=mybtn>Show Italy</button>
</div>
<div class="m-2">
    <input list="hosting-plan" type="text" class="myin" id="myinput">
    <datalist id="hosting-plan">
        <option value="Berlin"/>
        <option value="New York"/>
        <option value="Paris"/>
        <option value="Rome"/>

    </datalist>
</div>
<div id="parent">
    <div id="child1" class="mydiv germnay">
        <p>German</p>
        <h5>Berlin</h5><br>
    </div>
    <div id="child2" class="mydiv usa">
        <p>USA</p>
        <h5>New York</h5><br>  
    </div>
    <div id="child3" class="mydiv france">
        <p>France</p>
        <h5>Paris</h5><br>
    </div>
    <div id="child4" class="mydiv italy">
        <p>Italy</p>
        <h5>Rome</h5>
    </div>
</div>

0 个答案:

没有答案