使用：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（）;
}
}）;
}）;

FIDDLE

或上面的缩短版本

< $（$'$ $ $ $ $'$ $ $ $ $ $'$'$'$'$'$'$'$' $ b var elems = this.value =='all'？$（'。item'）：$（'。item [data-type =''+ this.value +''''）;
$（ '.item'）。not（elems.show（））。hide（）;
}）;
}）;

FIDDLE

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

FIDDLE

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

FIDDLE

这篇关于使用：data属性作为选择器来过滤元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！