<分区>
标签 javascript jquery html css
我在 href 中创建了一个包含图像的图库，这些图像由 javascript 根据它们的类(.cata、.catb、.catc).
<div class="section galleryholder">
<a href="images/trends1.jpg" class="eb cata"><img src="images/trends1.jpg" /></a>
<a href="images/trends2.jpg" class="eb catb"><img src="images/trends1.jpg" /></a>
<a href="images/trends3.jpg" class="eb cata"><img src="images/trends1.jpg" /></a>
<a href="images/trends4.jpg" class="eb catc"><img src="images/trends1.jpg" /></a>
<a href="images/trends5.jpg" class="eb catb"><img src="images/trends1.jpg" /></a>
</div>
我通过 css 应用了一些样式，根据 css-selector nth-of-type 在网格中显示不同的 href 和包含的图像:
.eb{
float:left;
display:inline-block;
width:33.33333333%;
margin:0;
position:relative;
text-decoration:none;
overflow:hidden;
}
.eb:nth-of-type(3n+1) {
width:66.66666667%;
}
.eb:nth-of-type(6n+1), .eb:nth-of-type(6n+2), .eb:nth-of-type(6n+3){
float:right;
}
.eb img{
width:100%;
height:auto;
}
目前，我通过 jquery(使用 .hide() 和 .show())在我的画廊中隐藏和显示 href。问题是，在 css 中应用的第 nth-of-type-selector 当然不会重绘显示的元素，因为元素不会从 DOM 中删除，只会隐藏。
由于我希望能够再次显示隐藏的元素，我认为从 DOM 中删除匹配的元素不是一个好的做法，因此我决定将 .eb 元素的类切换到另一个类。但这不会给我 css 再次计算匹配元素的期望结果，也不会应用适当的样式。
有什么建议吗？
最佳答案
很难说出您要完成什么...但是从您编写代码的方式以及您正在编写的页面示例来看，使用 jQuery 添加/删除不是更有意义吗某些元素的类，而不是依赖 CSS？
$( ".eb:nth-of-type(3n+1)" ).addClass( "eb-wide" );
然后设置你的类:
.eb:nth-of-type(3n+1) {
width:66.66666667%;
}
改为:
.eb-wide {
width:66.66666667%;
}
如果这不起作用，您可以简单地在 JavaScript 中编写一个循环来遍历可见元素，并在每次单击触发器时向它们添加/删除一个类。我认为这会更有意义，因为无论如何您都在使用 JS 操纵元素，并且仍然可以让您控制让 CSS 处理设计。
关于javascript - 如何使用 jquery 操作元素，使它们匹配它们的 css-Selector "nth-of-type"，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33874714/
相关文章：
javascript - 单击搜索按钮时如何隐藏 jQuery 中的导航栏切换？
javascript - 如何将一个数组的信息分割并发送到另一个数组？
javascript - jQuery load() 整个 html 文件但只显示单个 div
javascript - 如何根据浏览器选项卡设置cookie
javascript - 访问动态生成的 javascript 文件时遇到问题
jquery - 与多个 parent / child 一起向下滑动菜单
html - 列表组不会在 Angular 递归列表中显示为子列表