fiddle

Question

当CATEGORY处于活动状态时，我希望隐藏.closeorshow div。如果未选择任何类别，则应显示.closeorshow div。

我用$(".closeorshow").hide()和.show()测试了一下，但我是一个jQuery初学者，我无法理解。问题似乎是.closeorshow div在我取消选择任何类别时重新出现，而不是在没有选择任何类别时。

这是fiddle。

HTML：

<ul class="types">
    <li class="item" data-target="games">Games</li>
    <li class="item" data-target="music">Music</li>
    <li class="item" data-target="movies">Movies</li>
    <li class="item" data-target="ljudobild">Ljud & Bild</li>
</ul>
<div class="description" id="games">Description of Games</div>
<div class="description" id="music">Description of Music</div>
<div class="description" id="movies">Description of Movies</div>
<div class="description" id="ljudobild">Description of Television</div>

<br><br>

    <div class="closeorshow">
        This class are going to be SHOWN when NONE of the items are selected, and HIDED
        when one of the items is selected.
    </div>

JS：

$(document).ready( function() {
    $('.types li').click( function(t) {
        $('.closeorshow').hide();
        if ($(this).hasClass('active')) {
        $(this).removeClass('active');$(this).addClass('item');
        $('.closeorshow').show();
    } else {
        $(this).addClass('active');$(this).removeClass('item');
    }
        $('#'+$(this).attr('data-target')).toggle();
    });
});

Answer 1

基本思想是检查班级.active是否存在。这是通过调用$(".active")来完成的，这将生成一个数组，这意味着它可以访问.length方法。如果数组的length大于0，则您不想显示.closeorshow，因此请致电$(".closeorshow").hide()。否则，您确实希望显示它，因此请致电$("#.closeorshow").show()。

告诉我，如果一切都不是bueno。

fiddle

我只更改了您的JavaScript：

$(document).ready(function () {
    $('.types li').on("click", function () {
        $(this).toggleClass("active item");
        $('#' + $(this).attr("data-target")).toggle();

        if ($(".active").length === 0)
            $(".closeorshow").show();
        else
            $(".closeorshow").hide();

    });
});

这里的fiddle原本是为了展示相同的概念而制作的。仅保留参考，因为它比您的问题更简单，但仍然演示了如何解决问题。

当其他人被jQuery隐藏时显示一些div

1 个答案:

fiddle