所以我一直在努力做到这一点,但我不知道该怎么做。 是否可以使用按钮和输入字段过滤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>