1

これで私を助けてください。私は持っている：

<ul>
  <li>
    <h2>Headline for element 1</h2>
    <p>Lorem ipsum dolor sit amet quosque tandem.</p>
  </li>
  <li>
    <h2>Headline for element 2</h2>
    <p>Lorem ipsum dolor sit amet quosque tandem.</p>
  </li>
  <li>
    <h2>Headline for element 3</h2>
    <p>Lorem ipsum dolor sit amet quosque tandem.</p>
  </li>
  <li>
    <h2>Headline for element 4</h2>
    <p>Lorem ipsum dolor sit amet quosque tandem.</p>
  </li>
  <li>
    <h2>Headline for element 5</h2>
    <p>Lorem ipsum dolor sit amet quosque tandem.</p>
  </li>
</ul>

そして、これが私がやりたいことです：

  • リスト項目をクリックするたびに、中央の位置 (3 番目の位置) に移動し、クラス「アクティブ」が適用されます。

私はjQueryでこれを持っています:

jQuery(document).ready(function(){

var third = $("ul li:eq(1)");

$("ul li").click(function() {
$("ul li").removeClass("active"); //Remove any "active" class
$(this).insertAfter(third);
$(this).addClass("active"); //Add "active" class to selected tab
});
});

ただし、最初と 2 番目の要素では機能しません。

4

2 に答える 2

3

「しかし、最初と 2 番目の要素では機能しません。」

これは、アイテムを移動すると、他のアイテムが上に移動してギャップを埋めるためです。.detach()最初に問題のアイテムを見つけてから、残りの要素内の中間位置を計算してから、切り離されたアイテムを再挿入することをお勧めします。

ここで作成する変数にも注意してください。

var third = $("ul li:eq(1)");

...ドキュメントが最初にロードされたときと同じように、リストの 2 番目の項目を参照します。リストが並べ替えられたときに、2 番目の項目を参照するように自動的に更新されることはありません。(また、 2 番目thirdの項目を参照する変数を呼び出しても意味がありません。)ハンドラー内で中間位置を計算する必要があります。.click()

jQuery(document).ready(function(){
  $("ul li").click(function() {
    $("li.active").removeClass("active"); //Remove any "active" class
    var $active = $(this).detach().addClass("active"),
        $lis = $("ul li");
    $active.insertBefore($lis.eq(Math.floor($lis.length / 2)));
  });
});

デモ: http://jsbin.com/avupud/1/edit

于 2013-02-23T04:17:04.027 に答える
0

に変更してみてください$(this).insertAfter("ul li:eq(1)");

于 2013-02-23T04:16:17.103 に答える