jQuery show()、hide() 和 :visible 选择器答案

【问题标题】：jQuery show(), hide(), and the :visible selectorjQuery show()、hide() 和 :visible 选择器
【发布时间】：2015-04-11 06:21:01
【问题描述】：

<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 组，那么选中的项目和“未找到”的项目都会显示。

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

【问题讨论】：

标签： javascript jquery jquery-selectors

【解决方案1】：

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

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

代替：

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

我应该做的：

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

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

【讨论】：

【解决方案2】：

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/

【讨论】：

您的 jsfiddle 无法保持选中的元素可见。