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

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/

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

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

如果在应用任何过滤器后没有要显示的项目，则应显示 "none found" 项目。如果只显示一项，则应隐藏 "none found" 项。

在大多数情况下，我的设计有效，但在少数情况下，它会显示 "none found" 消息，而实际上是找到了项目。

在我的 JSFiddle 中，如果您选中一个项目，然后过滤到 C 组，那么选中的项目和 "none found" 个项目都会显示。

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

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

}

这是一个有效且更直接的方法 fiddle :http://jsfiddle.net/0L7j91Lq/

Answer 2

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

如果我从用于决定是否显示 "none found" 的选择器中排除 <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 选择器

jQuery show(), hide(), and the :visible selector

javascript

jquery

jquery-selectors