如果其他类可见或显示,则JQuery隐藏Class

时间:2010-11-30 20:43:12

标签: jquery class show-hide

发现了类似的问题,但没有任何内容涵盖我所需要的内容。我在我的例子中保持简单,我想使用JQuery。

我有两节课。如果在页面加载时显示“category”div,我想隐藏“filter”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>

提前致谢!

5 个答案:

答案 0 :(得分:4)

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

使用.hide()&amp; .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,
查尔斯

答案 1 :(得分:2)

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

答案 2 :(得分:2)

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

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

答案 3 :(得分:0)

<强>的jQuery

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

或只是:

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

答案 4 :(得分:0)

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

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

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