0

私はCSSのみの解決策を求めていますが（可能であれば）、これはjQueryで非常に簡単であることを知っています。

div のリストがあり、最後の項目はエラー メッセージです。単純なフィルタリング システムがあり、選択したフィルターに一致する div がない場合は、エラー div を表示したいと考えています。

HTML 構造:

<div id="listHolder">
    <div class="listItem" data-filter-class="["filter1"]"></div>
    <div class="listItem" data-filter-class="["filter2"]"></div>
    <div class="listItem" data-filter-class="["filter1"]"></div>
    <div class="listItem" data-filter-class="["filter4"]"></div>
    <div class="errorItem">Nothing to display here</div>
</div>

私が達成しようとしていること：

div がどのフィルターにも一致しない場合、私のフィルター プラグインはそれらにinactive. したがって、 のクラスを持つすべての div にlistItemも のクラスがあり、クラスに のスタイルinactiveを与えるかどうかを確認する必要があります。errorItemdisplay:block

参考までに、リストとフィルタリング システムに Wookmark プラグインを使用しています。私もLESSを使っています。

4

2 に答える 2

4

確かに可能です：http://jsfiddle.net/rudiedirkx/7b1kyfz3/3/

前のアイテムが非表示になっていない場合に、最後のアイテムを非表示にするには:

.listItem:not(.inactive) ~ .errorItem {
    display: none;
}

inactiveデモでは、クラスの表示ロジックではなく、クラスを切り替えるためだけに JS を使用しますerrorItem。

しかし、私はここにいるすべての賢明な人々に同意します.JSはおそらくこれをよりうまく行うことができます. とにかく、あなたはすでにそれを使用しています。

于 2014-11-09T00:13:48.673 に答える
3

The problem you have is in your requirement:

I need to check if all divs with the class of listItem also have the class of inactive to give the errorItem class the style of display:block

While we can set a style for the final <div> element based on its preceding siblings, we can't (without knowing how many there might be) 'check if all divs' have the inactive class. We can, however, use the sibling combinator (+) and a cumbersome selector:

.errorItem {
    display: none;
}
.listItem.inactive + .listItem.inactive + .listItem.inactive + .listItem.inactive + errorItem {
    display: block;
}

This is, however, ridiculous (especially if there's a dynamic number of elements preceding the .errorItem element.

If there's a class-name applied for an element which does match the supplied filters, active for example, this is much simpler, and achieved by:

.errorItem {
    display: block;
}

.listItem.active ~ .errorItem {
    display: none;
}

Also, as pointed out in the comments, the negation operator is also available (though, obviously, it depends on implementation by the browser in use), which would lend itself to the selector:

.errorItem {
    display: block;
}

.listItem:not(.inactive) ~ .errorItem {
    display: none;
}

On the whole, I'd strongly suggest using JavaScript to support this functionality, especially since the use of Wookmark implies JavaScript (if not necessarily jQuery) use in the same site already.

Native JavaScript:

function hasPrecedingSibling (elem, state) {
    if (!state) {
        return false;
    }
    var found = false,
        cur = elem;
    while (cur.previousElementSibling && found === false) {
        if (cur.classList.contains(state)) {
            found = true;
        }
        else {
            cur = cur.previousElementSibling;
        }
    }
    return found;
}

[].forEach.call(document.querySelectorAll('.errorItem'), function (err) {
    err.style.display = hasPrecedingSibling (err, 'active') ? 'none' : 'block';
});
于 2014-11-09T00:02:30.333 に答える