單獨的類使用jquery的屬性可見性

我試圖根據用戶使用複選框選擇器爲各個屬性選擇的類名（其中大部分是多個類）來隱藏和顯示<li>。但是我注意到，在我的實現中，它會查找屬性並執行任務，而不管表單上的所有其他屬性選擇器。如何調整代碼，以便根據各個類屬性的可見性選擇顯示<li>？單獨的類使用jquery的屬性可見性

Here is the fiddle。正如你所看到的，如果你檢查'A'框，它隱藏'A'，'AB'，'AC'和'ABC'。但是用戶認爲任何具有屬性「B」和「C」的<li>都是可見的，並且「AB」，「AC」和「ABC」是隱藏的。

因此，如果用戶選擇了「A」被隱藏，則僅<li>被隱藏是

「A」

，因爲它是唯一一個與剛「A」，和' B」和 'C' 是屬性用戶想要可見，留下下面可見：

'B'， 'C'， 'AB'， '交流'， 'BC'，「ABC」

。如果用戶選擇'A'和'B'隱藏，則隱藏以下內容：

'A'，'B'，'AB'

;可見是：

'C'， '交流'， 'BC' 和 'ABC'

，因爲他們有一個 'C' 類屬性。我假設我將不得不做一個數組或類似的東西，然後查找數組中的任何屬性，並相應地顯示/隱藏它們。

來源

2012-07-09 chris Frisina

小提琴缺少JavaScript代碼。 – Quantastical 2012-07-09 20:13:55

現在就試試，對不便之處敬請原諒。 – 2012-07-09 20:20:59

這裏是一種用做少一點代碼：

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-09 21:23:17 soupy1976

建立在這裏你的榜樣的頂部是代碼：

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

，你可以找到demo here

來源

2012-07-09 20:37:13 Nir

單獨的類使用jquery的屬性可見性

回答

相關問題