Question

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

请考虑以下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”链接时，我希望元素为“hide（）;”如果我点击的元素是“：偶数”那么将到位的那个（奇数）将变为“偶数”，因此应用边距，反之亦然。

基本上它是一个动态的“：nth-child（2n）”......每个第二个元素都必须没有边距，然后第一个必须有25px的边距，即使我从中删除一个元素基。

希望有道理！非常感谢你

Answer 1

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

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

以下是演示：http://jsfiddle.net/X5eCa/

Answer 2

nth-child是一个CSS选择器，所以你应该可以这样做：

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

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

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

Answer 3

这对你有用。为了清晰起见，fiddle使用红色/蓝色背景

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');
}

从组中删除元素但保持“奇数/偶数”状态准确

3 个答案: