Javascript 使用jQuery和CSS隐藏元素有什么区别？

我创建了类似于slider的东西，它有三个块，每个块中有两张图片和描述。在顶部，它显示了其中一个块及其两个图片和说明。在底部，您可以看到其他两个块的预览，无需说明。看起来是这样的（图片是随机的）：

在这里，它的工作如预期，但有一件事我不明白。单击底部预览时，将从顶部活动图片中删除说明，并将说明添加到底部非活动图片中，块将更改位置。默认情况下，所有带有说明的figcaption都有class.sliderblock\uu标题并隐藏在css中，但带有class.sliderblock\uu标题--active的figcaption将显示：

.sliderblock__caption{
    display: none;
}

.sliderblock__caption--active{
    display: block;
}

使用css它可以很好地工作，但是当我尝试使用js时，它就不行了

我在js文件中放置了相同的隐藏内容，但它并没有隐藏预期要隐藏的内容

var caption = ".sliderblock__caption";
var activecaption = ".sliderblock__caption--active";

$(caption).css("display", "none");
$(activecaption).css("display", "block");

如果单击其中一个底部块，该块将更改位置，但描述不会更改

关键是它实际上将“active”类添加到figcaptions中，但它不起作用。当您查看Firebug中的元素时，它显示顶部的FigCaption具有“活动”类，但它们的css如下所示：

element.style{
    display: none;
}

---

这条规则从何而来？我应该将js中的代码放在哪里才能获得与css相同的效果？

当您执行

$myElm.hide（）

或

$myElm.css（“display”，“none”）

时，您正在将

style

属性设置为

display:none

。这就是内联元素CSS

您可以使用

样式
属性执行相同操作：

<div style="display:none">



使用CSS（即使您在文件中使用内联或规则）不需要JavaScript，而jQuery
CSS
方法要求浏览器允许执行JavaScript。
jQuery使用CSS隐藏它们，除非您使用
.destroy
或
.remove
，然后，它将它们从domjQuery中取出，并更改
display
属性。jQuery源代码中的代码行：
elem.style.display=show？值[索引]| |“”：“无”