1

クラスに応じて要素をフィルタリングする簡単な方法に取り組んでいます。ユーザーがチェックボックスをオンにすると、jQuery は問題なく動作し、クラスに応じて要素をオフにします。要素をオフにする行と、要素の外観は次のとおりです。

$('#ItemList div:not(.' + Filter + ')').hide();
<div class="1 2 3">asdf</div>

ただし、クラス属性の代わりに data-xxxx 属性を使用してこれを実行できるようにしたいのですが、実際にこの方法で要素を選択するのに問題があります。私が持っているものは以下です：

$("#ItemList div:not([data-filter'" + Filter + "'])").hide();
<div data-filter="1 2 3">asdf</div>

では、クラスの代わりに data-filter 属性を使用して要素を選択するにはどうすればよいでしょうか? ここで見つけた方法は私にはうまくいきません! どうもありがとう。

アップデート

わかりましたので、James Allardice の返信がうまくいきました。しかし、元の投稿でおそらく言ったはずの別の問題が発生しました。

各 data-xxxx 属性には多数の値を指定できます。値のいずれかが表示された場合に要素が非表示にならないようにするには、このフィルターが機能する必要があります。

$('#Filters input').change(function()
{
    $('#ItemList div').show();
    $('input').each(function()
    {
        var Checked;
        if(Checked = $(this).attr('checked'))
        {
            var Filter = $(this).attr('data-filter');
            $("#ItemList div:not([data-filter='" + Filter + "'])").hide();
        };
});

<div data-filter="1">1</div>
<div data-filter="1 3">1 3</div>

たとえば、次の属性を持つチェックボックスがオンになっている場合、両方の div が表示されます。

data-filter="1"

しかし、属性がこのようなものである場合、2 番目のみが表示されます。

data-filter="3"
4

3 に答える 3

4

あなたは近かった。あなたはただ=キャラクターを見逃しています：

$("#ItemList div:not([data-filter='" + Filter + "'])").hide();
//                               ^ You missed this

これが実際の例です。

于 2012-10-19T11:41:31.663 に答える
2

次のように jQuery フィルター関数を使用できます。

$("#ItemList div").filter(function()
    {
        var attr = $(this).attr('data-filter');
        var filterArr = attr.split(" ");
        return $.inArray(Filter, valArr) == -1;
    }
).hide();

私はこれをテストしていませんが、動作するはずです。このリンクからinArrayのドキュメントを見つけることができ、このリンクからフィルター関数のドキュメントを見つけることができます

于 2012-10-19T12:17:06.590 に答える
0

jQuery（'[data-name = something]'）またはそうでない場合はjQuery（'[data-name！= something]'）

ここで利用可能な属性セレクターを確認してください：http：//api.jquery.com/category/selectors/

于 2012-10-19T11:47:44.453 に答える