Question

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

http://plnkr.co/edit/o9wTYhrTnpfgXu4aEIYW?p=preview

这里按预期工作，但有一件事我不明白。单击底部预览时，它会从顶部活动图片中删除描述，并向底部不活动图片添加描述，并阻止更改位置。默认情况下，所有带描述的figcaptions都有类.sliderblock__caption并隐藏在css中，但是那些带有类.sliderblock__caption - active的那些显示：

.sliderblock__caption{
    display: none;
}

.sliderblock__caption--active{
    display: block;
}

使用css它可以正常工作，但是当我尝试使用js时，它却没有。

http://plnkr.co/edit/kpnx9oGJzvz94u7rjGTM?p=preview

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

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

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

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

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

element.style{
    display: none;
}

这条规则来自哪里？我应该把这段代码放在js中以获得与css相同的效果？

Answer 1

当您执行$myElm.hide()或$myElm.css("display", "none")时，您需要将style属性设置为display:none。那是内联元素CSS。

您可以使用style属性执行相同操作：

<div style="display:none">

使用CSS（即使您在文件中使用内联或规则），也不需要JavaScript，而jQuery css方法要求浏览器允许执行JavaScript。

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

1 个答案: