如果其他类可见或显示，JQuery 隐藏类

Question

发现类似的问题，但没有什么能完全满足我的需要。我在示例中保持简单，并且我想使用 JQuery。

我有两节课。如果页面加载时显示“类别”div，我想隐藏“过滤器”div。目前没有与这两个类别相关的样式。我相信我已经很接近了，但它不起作用。

<script language="text/javascript">
if(!$(this).hasClass("category")){
$('filter').css('display', 'none');
}
</script>

<div class="category">By Category</div>
<div class="filter">By Custom Filter</div>

提前致谢！

Answer 1

使用 .length 测试元素是否存在。

使用 .hide() & .show() 显示和隐藏元素。

最后，您希望代码仅在页面加载完成时运行，因此您希望将其全部包装在 $(document).ready() 中。

所以像这样的东西应该最有效：

<script language="text/javascript">
    $(document).ready(function() {
        //following code will hide all elements with a class of 'filter'
        //if any elements with a class of 'category' are found
        if($('.category').length){
            $('.filter').hide();
        }
    });
</script>

<div class="category">By Category</div>
<div class="filter">By Custom Filter</div>

HTHs，
查尔斯

Answer 2

将选择器更改为 $('.filter')

Answer 3

var $filter = $(".filter");
var $category = $(".category");

$category.is(":visible") ? $filter.hide() : $filter.show();

Answer 4

jQuery

$('div').each(function() {
    if ($(this).hasClass("category")) {
        $('.filter').css('display', 'none');
    }
});

或者只是：

if ($('.category').length) {
    $('.filter').css('display', 'none');
}

Answer 5

 <div class="category">By Category</div>
 <div class="filter">By Custom Filter</div>

假设“在页面加载时显示”是指渲染而不是显示/隐藏可见性。

$('.category').each(function(){
    $('.filter').hide();
});