Question

我在项目中发现了一点代码：

if ($(".c1 .c2").is(":hidden")){
    $(".c1").hide();
} else {
    $(".c1").show();
}

对我而言，这似乎是相当的重复，因为如果隐藏了某些东西，或者显示出它，那么它就会隐藏起来。唯一的选择是使用的选择器的差异，所以有一些可能的副作用。改变它：

if ($(".c1").is(":hidden")){
    $(".c1").hide();
} else {
    $(".c1").show();
}

它真的什么都不做，对吧？

相关HTML如下：

<span class="c1">
  <span>  </span>
  <span class="c2"> </span>
</span>

CSS如下

.c1{ display: none; }

Answer 1

这一行：

if ($(".c1 .c2").is(":hidden")){

不检查.c1是否被隐藏，而是检查.c2（必须是.c1元素的后代，每个选择器）是否隐藏。

因此，它基本上是根据孩子的状态对父母行事。

Answer 2

$(".c1 .c2")与$(".c1")的选择器不同。它也没有隐藏已经隐藏的东西，它隐藏了一个隐藏了某些东西的父元素c1。所以改变它可能会破坏它。此外，通过更改它，代码不再有意义，因为现在您隐藏了已隐藏的内容。

Answer 3

如果隐藏内部.c1，则隐藏外部.c2？为什么可能有意义。

Answer 4

考虑以下背景：

<div class="c1">
    <h2>My very interesting list</h2>
    <ul>
        <li>
            Some
            <div class="c2">More information</div>
        </li>
        <li>
            Other
            <div class="c2">More information</div>
        </li>
        <li>
            Data
            <div class="c2">More information</div>
        </li>
    </ul>
</div>

如果隐藏了任何后代c2元素，则将隐藏整个块。这与后一个例子非常不同，后者实际上什么都不做。

Answer 5

我认为如果孩子（c1）被隐藏，第一个代码可用于隐藏父容器（c2）。如果你考虑它，它确实有意义。

Answer 6

它可能确实有所作为，但并非在所有情况下都能做到。它确保每个.c1隐藏，如果它包含隐藏的.c2，反之亦然。

理想情况下重构可以添加比c1和c2更有意义的类名

Answer 7

尝试使用.toggle（），如下所示

       $('.c1').toggle();

这段代码有什么用吗？

7 个答案: