Question

<script type="text/javascript">    
function showHide(showWhat) {
    if (showWhat == 'a') {
        $('.group-a').show();
        $('.group-b, .group-c').has('input[type="checkbox"]:checked').show();
        $('.group-b, .group-c').not(':has(input[type="checkbox"]:checked)').hide();
    } else if (showWhat == 'b') {
        $('.group-b').show();
        $('.group-a, .group-c').has('input[type="checkbox"]:checked').show();
        $('.group-a, .group-c').not(':has(input[type="checkbox"]:checked)').hide();
    } else if (showWhat == 'c') {
        $('.group-c').show();
        $('.group-a, .group-b').has('input[type="checkbox"]:checked').show();
        $('.group-a, .group-b').not(':has(input[type="checkbox"]:checked)').hide();
    } else if (showWhat == 'all') {
        $('.group-a, .group-b, .group-c').show();
    }
    $('.none').each(function(index, element) {
        if ($(element).parent().children(':visible').length > 1) {
            $(element).hide();
        } else {
            $(element).show();
        }
    });
}

$(document).ready(showHide('all'));
</script>

Show:<br/>
<button onclick="showHide('a');">Group A</button><br/>
<button onclick="showHide('b');">Group B</button><br/>
<button onclick="showHide('c');">Group C</button><br/>
<button onclick="showHide('all');">All</button>

<ul>
    <li class="none">none found</li>
    <li class="group-a">
        <label><input type="checkbox"/>A: foo</label>
    </li>
    <li class="group-a">
        <label><input type="checkbox"/>A: bar</label>
    </li>
    <li class="group-b">
        <label><input type="checkbox"/>B: foo</label>
    </li>
    <li class="group-b">
        <label><input type="checkbox"/>B: bar</label>
    </li>
</ul>

JSFiddle：http://jsfiddle.net/5wnay9a8/3/

我有一个包含多个组的列表，每个组由共享类标识。每个组中的项目都有一个复选框。列表中还有一个项目表示没有显示其他项目。

我有一个javascript方法过滤列表内容，以便显示指定组的项目，以及任何其他组的任何项目（如果已选中）。

如果在应用任何过滤器后，没有要显示的项目，则应显示“未找到”项目。如果甚至有一个要显示的项目，则应隐藏“未找到”项目。

对于大多数情况，我的设计是有效的，但在少数情况下，当事件发现时，它会显示“未找到”消息。

在我的JSFiddle中，如果您检查一个项目，然后过滤到C组，则会显示选中的项目和“未找到”项目。

是否存在某种竞争条件或导致元素注册为实际不可见的情况（或反之亦然）？

Answer 1

function showHide(showWhat) {
    if (showWhat == "all")
    {
        $(".g").show();
    }
    else
    {
        $(".g").hide();
        $(".group-" + showWhat).show();
              $('.g').has('input[type="checkbox"]:checked').show();

    }
    $('.none').each(function(index, element) {
        if ($(element).parent().children(':visible').length > 1) {
            $(element).hide();
        } else {
            $(element).show();
        }
    });

}

这是一个工作且更直接的小提琴：http://jsfiddle.net/0L7j91Lq/

Answer 2

我是个白痴。 jQuery中没有错误或竞争条件。

如果我从用于决定是否显示“未找到”的选择器中排除<li class="none">none found</li>元素，那么一切都按预期工作。

而不是：

if ($(element).parent().children(':visible').length > 1) {

我应该做的：

if ($(element).parent().children(':visible:not(.none)').length > 0) {

这将始终排除“none found”元素，并从列表中的其他元素开始计算，以确定是否找到任何项目。

jQuery show（），hide（）和：visible选择器

2 个答案: