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>

基本的にすべてのボックスが左に浮いており、1 行に 2 つのスペースがあります。最初のボックスには 25px の margin-right があるため、2 番目のボックスはコンテナーの端に押し込まれます。

「.close」リンクをクリックすると、要素を「hide();」にしたい クリックした要素が「:偶数」の場合、配置される要素 (奇数要素) は「偶数」になるため、マージンが適用され、その逆も同様です。

基本的には動的な ":nth-child(2n)" です... 2 番目の要素ごとにマージンがなく、そのグループから 1 つの要素を削除したとしても、最初の要素には 25px の margin-right が必要です。

それが理にかなっていることを願っています！どうもありがとうございました

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

これはうまくいくはずです。わかりやすくするために、フィドルは赤/青の背景を使用します

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 に答える
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 に答える