使用:data属性作为选择器来过滤元素 [英] Using :data attribute as a selector to filter elements
问题描述
我正尝试使用自定义数据属性通过下拉选项来过滤事物。我似乎无法让选择器正常工作,只是想知道这是否真的有可能。目前正在查看 https://api.jqueryui.com/data-selector/ ,但我可以'b
$ b My HTML:
< div class =item-filter>
< form>
< select id =item-filter-select>
< option value =allid =all>全部显示< / option>
< option value =clothesid =clothes>服装< / option>
< option value =jewelryid =jewelry>珠宝< / option>
< option value =miscid =misc>其他< / option>
< / select>
< / form>
< / div>
< div class =item-displayid =item-display>
< div class =item clothesid =item-clothesdata-type =clothesdata-name =Sweater01data-price =15>
< span>衣服< / span>< br>
< a href =#class =add-itemid =item01>添加到购物车< / a>
< / div>
< div class =item jewelryid =item-jewelrydata-type =jewelrydata-name =Necklace01data-price =5>
< span>珠宝< / span>< br>
< a href =#class =add-itemid =item02>加入购物车< / a>
< / div>
< div class =item miscid =item-miscdata-type =miscdata-name =PhoneCase01data-price =10>
< span> Misc< / span>< br>
< / div>
< div class =clear>< / div>
< / div>
我的JS:
$(document).ready(function(){
// Handler for .ready()called。
$('#item-filter如果($(this))变化(函数(){
var衣服= $(div:data(type,clothes));
.val()==='clothes'){
clothes.hide();
console.log(您选择的衣服);
}
else if (this).val()==='jewelry'){
console.log(You selected jewelry);
}
else if($(this).val() ==='misc'){
console.log(您选择了杂项);
}
else {
console.log(您显示所有);
}
});
});
我只想隐藏与selected数据类型关联的元素(我最终会使用:不选择隐藏不匹配的元素),但现在我只需要让选择器正常工作。感谢您的帮助!
只需直接使用选择值来定位具有正确数据属性的元素
$($#$ b $ $ $ $ $ $'$ $ $ $ $''code $ $(document).ready(function(){
$('#item-filter-select')。on改变',函数(){
if(this.value =='all'){
$('。item')。show();
} else {
var elems = $('。item [data-type =''+ this.value +'''');
$('。item')。not(elems).hide();
elems.show();
}
});
});
或上面的缩短版本
< $($'$ $ $ $ $'$ $ $ $ $ $'$'$'$'$'$'$'$' $ b var elems = this.value =='all'?$('。item'):$('。item [data-type =''+ this.value +'''');
$( '.item')。not(elems.show())。hide();
});
});
I am trying to use a custom data attribute to filter things via dropdown selections. I can't seem to get the selector to work correctly, and was just wondering if that is actually possible. Currently looking at https://api.jqueryui.com/data-selector/ but I can't seem to get it to work.
My HTML:
<div class="item-filter">
<form>
<select id="item-filter-select">
<option value="all" id="all">Show All</option>
<option value="clothes" id="clothes">Clothing</option>
<option value="jewelry" id="jewelry">Jewelry</option>
<option value="misc" id="misc">Miscellaneous</option>
</select>
</form>
</div>
<div class="item-display" id="item-display">
<div class="item clothes" id="item-clothes" data-type="clothes" data-name="Sweater01" data-price="15">
<span>Clothes</span><br>
<a href="#" class="add-item" id="item01">Add to Cart</a>
</div>
<div class="item jewelry" id="item-jewelry" data-type="jewelry" data-name="Necklace01" data-price="5">
<span>Jewelry</span><br>
<a href="#" class="add-item" id="item02">Add to Cart</a>
</div>
<div class="item misc" id="item-misc" data-type="misc" data-name="PhoneCase01" data-price="10">
<span>Misc</span><br>
<a href="#" class="add-item" id="item03">Add to Cart</a>
</div>
<div class="clear"></div>
</div>
My JS:
$( document ).ready(function() {
// Handler for .ready() called.
$('#item-filter-select').change(function() {
var clothes = $( "div:data(type, clothes)" );
if($(this).val() === 'clothes'){
clothes.hide();
console.log("You selected clothes");
}
else if($(this).val() === 'jewelry'){
console.log("You selected jewelry");
}
else if($(this).val() === 'misc'){
console.log("You selected miscellaneous");
}
else {
console.log("You are showing all");
}
});
});
I just want to hide the elements associated to the data type "selected" (I will eventually use the :not selector to hide elements that don't match) but for now I just need to get the selectors to work properly. Thank you for any help!
Just use the selects value directly to target the elements with the correct data attribute
$(document).ready(function () {
$('#item-filter-select').on('change', function () {
if (this.value == 'all') {
$('.item').show();
}else{
var elems = $('.item[data-type="'+this.value+'"]');
$('.item').not(elems).hide();
elems.show();
}
});
});
or a shorter version of the above
$(document).ready(function () {
$('#item-filter-select').on('change', function () {
var elems = this.value == 'all' ? $('.item') : $('.item[data-type="'+this.value+'"]');
$('.item').not(elems.show()).hide();
});
});
这篇关于使用:data属性作为选择器来过滤元素的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!