Question

我正在尝试使用自定义数据属性通过下拉选项过滤事物。我似乎无法让选择器正常工作，只是想知道这是否真的可行。目前正在查看https://api.jqueryui.com/data-selector/，但我似乎无法让它发挥作用。

我的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>

我的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");
    }
});

});

我只是想隐藏与数据类型相关联的元素＆＃34;选择＆＃34; （我最终会使用：not selector隐藏不匹配的元素）但是现在我只需要让选择器正常工作。谢谢你的帮助！

Answer 1

直接使用选择值来定位具有正确数据属性的元素

$(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

或上述

的较短版本

$(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

Answer 2

你可以这样做：

$('#item-filter-select').change(function() {
    var value = $(this).val();

   var $selected= $('div').filter(function() { 
       return $(this).data("type") == value;
   });

   $('div').show();
   $selected.hide();
});

DEMO

Answer 3

试试这个

$( document ).ready(function() {
// Handler for .ready() called.

    $('#item-filter-select').change(function() {

        var clothes = $( 'div[data-type="clothes"]' ),
            value = this.value;

        if(value === 'clothes'){
            clothes.hide();
            console.log("You selected clothes");
        }
        else if(value === 'jewelry'){
            console.log("You selected jewelry");
        }
        else if(value === 'misc'){
            console.log("You selected miscellaneous");
        } 
        else {
            console.log("You are showing all");
        }
    });

});

但是因为你有一个具有相同价值的类，你可以使用它。

var value = this.value,
    clothes = $( '.clothes' );

或根据用户的选择进行选择

var value = this.value,
    selection = $( '.'+value );

或隐藏除选择之外的所有内容

var value = this.value,
    all = $( '.item' ),
    selected = all.filter('.' + value);

演示 http://jsfiddle.net/S8UYy/
（显示已选中并隐藏其余）

Answer 4

您可以使用not选择器和data-attribute选择器隐藏与所选过滤器属性不匹配的所有元素;记得以前一直显示它们。

代码：

$(document).ready(function () {
    $('#item-filter-select').change(function () {
        $("#item-display div").show();
        if ($(this).val() === 'all') return
        $("#item-display div:not([data-type='" + $(this).val() + "'])").hide();
    });

});

演示：http://jsfiddle.net/IrvinDominin/ff8kG/

使用：data属性作为筛选元素的选择器

4 个答案: