1

<li>個々の属性のチェックボックスセレクターを使用してユーザーが選択したクラス名（ほとんどは複数のクラス）に基づいて、非表示と表示を設定しようとしています。ただし、私の実装では、フォーム上の他のすべての属性セレクターに関係なく、属性を検索してタスクを実行することに気付きました。<li>個々のクラス属性の可視性の選択に基づいてが表示されるようにコードを調整するにはどうすればよいですか？

これがフィドルです。

ご覧のとおり、「A」ボックスをチェックすると、「A」、「AB」、「AC」、および「ABC」が非表示になります。ただし、ユーザーは、<li>属性「B」および「C」を持つものはすべて表示され、「AB」、「AC」、および「ABC」は非表示であると考えています。

したがって、ユーザーが「A」を選択して非表示にした場合、<li>非表示にするのは

「A」

、これは「A」だけを持つ唯一の属性であり、「B」と「C」はユーザーが表示したい属性であり、次のものを表示したままにします。

「B」、「C」、「AB」、「AC」、「BC」、「ABC」

。ユーザーが非表示にするために「A」と「B」を選択すると、以下が非表示になります。

「A」、「B」、「AB」

; 表示されるのは次のとおりです。

「C」、「AC」、「BC」、および「ABC」

、「C」クラス属性があるため。配列などを作成してから、配列内の属性を探し、それに応じて表示/非表示にする必要があると思います。

4

2 に答える 2

1

これを少し少ないコードで行う方法は次のとおりです。

http://fiddle.jshell.net/vnjHn/1/

$('form input').on('change', function() {

    var notSelectedList = $('form input:not(:checked)').map(function() {
        return '.' + $(this).attr('name');
    }).get().join(',');

    $('.viewing li').each(function() {
        $(this).toggle($(this).is(notSelectedList));
    });

});​

これは、非表示にしないクラスのコンマ区切りリストを作成し、次にこれらのクラスのすべてのリスト項目をチェックすることによって機能します。これは、チェックを行うための少し簡単な方法だと思います。

于 2012-07-09T21:23:17.377 に答える
0

ここにあなたの例の上に構築するのはコードです：

<form class="form">
    <p> Check to hide </p>
    <input type="checkbox" id="1" name="1" class="selector"/><label for="1">A</label>
    <input type="checkbox" id="2" name="2" class="selector"/><label for="2">B</label>
    <input type="checkbox" id="3" name="3" class="selector"/><label for="3">C</label>
</form><br>

<div class="viewing">
    <ul>
        <li class="1">A</li>
        <li class="2">B</li>
        <li class="3">C</li>
        <li class="1 2">AB</li>
        <li class="2 3">BC</li>
        <li class="1 3">AC</li>
        <li class="1 2 3">ABC</li>
    </ul>
</div>​

とjs：

var classes = {'1':false,'2':false,'3':false};
$('form input').on('change', function() {
var itemClass= $(this).attr('name');
console.log(itemClass);
classes[itemClass] = $(this).attr('checked') == 'checked';    
    $('.viewing>ul>li').each(function(){
        var classList =$(this).attr('class').split(/\s+/);
        var hide = true;
        $.each( classList, function(index, item){
            if (classes[item] == false) {
hide = false;                

            };
});
        if(hide == true)
            $(this).hide();
        else
            $(this).show();
    });
});​

ここでデモを見つけることができます

于 2012-07-09T20:37:13.430 に答える