0

我想要实现的目标相当容易（我认为），但不幸的是我无法掌握解决方案。

考虑以下 HTML 语法：

<div id="wrapper">
    <div class="box">
        <a href="#" class="close">close</a>
    </div>
    <div class="box">
        <a href="#" class="close">close</a>
    </div>
    <div class="box">
        <a href="#" class="close">close</a>
    </div>
    <div class="box">
        <a href="#" class="close">close</a>
    </div>
    <div class="box">
        <a href="#" class="close">close</a>
    </div>
</div>

基本上所有的盒子都向左浮动，每行有 2 个空间。第一个盒子的边距为 25px，因此第二个盒子被推到其容器的边缘。

当我单击“.close”链接时，我希望元素“隐藏（）；” 如果我单击的元素是“：偶数”，那么将出现的元素（奇数）将变为“偶数”，因此应用边距，反之亦然。

基本上它是一个动态的 ":nth-child(2n)" ... 每个第二个元素都必须没有边距，然后第一个元素必须有 25px 的边距，即使我从该组中删除了一个元素。

希望这是有道理的！非常感谢

4

3 回答 3

1

添加.even和.odd类并绑定此函数：

$('.box').click( function() {
    $(this).hide().nextAll(':visible').toggleClass('even odd');
});

这是演示：http: //jsfiddle.net/X5eCa/

于 2013-09-19T23:48:55.607 回答
0

nth-child是一个 CSS 选择器，所以你应该能够做到：

div.box:nth-child(odd) {
  margin-right:25px
}

div.box:nth-child(even) {
  margin-right:0;
}

...您可以添加您需要的任何其他样式。

于 2013-09-19T23:23:34.330 回答
0

这应该适合你。为了清晰起见，小提琴使用红色/蓝色背景

CSS优先：

.redback {
  background-color:red;   
}
.blueback {
  background-color:blue;
}

现在一些Javascript

colorBoxes();

$(".box").on('click', function() {
  $(this).hide();
    colorBoxes();

});

function colorBoxes() {
  $(".box").removeClass('redback blueback');
  $(".box:visible:odd").addClass('redback');
  $(".box:visible:even").addClass('blueback');
}
于 2013-09-19T23:49:44.863 回答