Question

我有一个jsFiddle，当选中某些复选框时会显示文本。如果列表项是“邪恶的”，我不想显示它。

<ul class="filterThis">

<li class="red evil circle">
<h3>red evil circle</h3>
</li>

<li class="red circle">
<h3>red circle</h3>
</li>
.
.

Answer 1

而不是选择所有列表元素：

var targets = $('.filterThis li')

你只选择那些不邪恶的东西：

var targets = $('.filterThis li:not(.evil)')

Answer 2

if (!$(this).is('.evil'))

FIDDLE

作为旁注，UL（你不再需要大写的标签，它不是1990）不能把P作为孩子，但是应该有LI元素作为孩子，所以你的标记是无效的。

我可能会这样做：

$('.filters input[type="checkbox"]').on('change', function() {
    var checks1 = $('input[type="checkbox"]', '.filters ul:first').map(function() {
        if (this.checked) return this.value;
    }),
        checks2 = $('input[type="checkbox"]', '.filters ul:last').map(function() {
        if (this.checked) return this.value;
    });
    $('.filterThis li').each(function(i,elm) {
        var classes = elm.className.split(' '), 
            show = false;
        if (classes.length==2 && checks1.length>0 && checks2.length>0) {
            if ($.inArray(classes[0], checks1)!=-1 || $.inArray(classes[0], checks2)!=-1 && 
                $.inArray(classes[1], checks1)!=-1 || $.inArray(classes[1], checks2)!=-1) show=true;
        }
        $(elm).toggle(show);
    });
});

FIDDLE（甚至修正了标记）

Answer 3

我认为您需要修改下面的迭代器来检查输入长度是否为0

$.each(classList, function(index, item){
   var inputItem = $('input[value="'+item+'"]');
   if (!inputItem.length || inputItem.not(':checked').length) {
     include = false;
     return false;  
   }
});

DEMO： http://jsfiddle.net/mgaRw/19/

Answer 4

为什么不动态创建<li>元素而不是过滤？不要让简单的事情复杂化！

<ul class="filters" id="shapes">
  <li><input type="checkbox" value="circle">Circle</li>
  <li><input type="checkbox" value="square">Square</li>
  <li><input type="checkbox" value="triangle">Triangle</li>
</ul>

<ul class="filters" id="colors">
  <li><input type="checkbox" value="red">Red</li>
  <li><input type="checkbox" value="blue">Blue</li>
  <li><input type="checkbox" value="yellow">Yellow</li>
</ul>

<ul class="result"></ul>

几杯Coffee之后：

$('input[type="checkbox"]').on 'click', ->
  $list = $('ul.result')

  $list.empty()

  $.each $('#shapes').find('input'), ->
    return true unless $(this).is(':checked')
    shape = $(this).val()
    $.each $('#colors').find('input'), ->
      return true unless $(this).is(':checked')
      color = $(this).val()
      $list.append $('<li>').html("#{shape} #{color}")

FIDDLE

从选择中删除不需要的列表项

4 个答案: