0

FIRST LI が非表示になっているリスト (動的) がありますが、そこに含まれるデータは上記の div ヘッダーに挿入されます。リストを上下に移動する 2 つのアンカーがあります。

ユーザーがクリックすると、2 番目のリスト項目がリストの一番上に移動し (そしてそのデータがヘッダーに追加され)、実際の LI が非表示になるようにしようとしています。ユーザーがクリックすると、最後のリスト項目が前面に移動します (そのデータが再びヘッダーに追加され、非表示になります)。

クリックでリスト項目を移動できないようです

HTML

<div class="top">
  <a href="#" onclick="slide('up')"></a>
  <h1 class="mainTitle"></h1>
  <a href="#" onclick="slide('down')"></a>
</div>

<ul>
 <li><span class="subtitle">Title 1</span></li>/*First div always hidden and data appended to h1*/
 <li><span class="subtitle">Title 2</span></li>
 <li><span class="subtitle">Title 3</span></li>
 <li><span class="subtitle">Title 4</span></li>
 <li><span class="subtitle">Title 5</span></li>
</ul>

jQuery

$(document).ready(function () {
    $('li:first-child').css('display', 'none');
    $('.mainTitle').append($('li:first-child .subtitle').html());


    function slide(direction) {
      if (direction === 'up') {
        $('li:first-child').before($('li:last-child'));
      } else {
        $('li:last-child').before($('li:first-child'));
      }
    }

});
4

2 に答える 2

1

関数がスコープではないため、slide を呼び出すことはできません。関数を ready 呼び出しから削除します。より良い解決策は、イベントをインラインではなく jQuery で追加することです。

解決策 1

$(document).ready(function () {
    $('li:first-child').css('display', 'none');
    $('.mainTitle').append($('li:first-child .subtitle').html());
});

function slide(direction) {
  if (direction === 'up') {
    $('li:first-child').before($('li:last-child'));
  } else {
    $('li:last-child').before($('li:first-child'));
  }
}

より良い解決策

$(document).ready(function () {
    $('li:first-child').css('display', 'none');
    $('.mainTitle').append($('li:first-child .subtitle').html());    

    function slide(direction) {
      if (direction === 'up') {
        $('li:first-child').before($('li:last-child'));
      } else {
        $('li:last-child').before($('li:first-child'));
      }
    }

    $(".top").on("click","a",function(e){
        slide( $(this).data("direction") );
        e.preventDefault();
    });
});

そしてHTML：

<div class="top">
  <a href="#" data-direction="up"></a>
  <h1 class="mainTitle"></h1>
  <a href="#" data-direction="down"></a>
</div>
于 2013-10-22T20:33:49.730 に答える
0

インラインを jQuery a la' に変更します。

$( ".subtitle" ).click(slide(up););

http://api.jquery.com/click/

またはバニラ JS の場合:

document.getElementById('.subtitle').onmousedown = function() {
    slide();

};

次に、質問で指定した jQuery ブロックからスライド関数を削除すると、スコープの問題がなくなります。

于 2013-10-22T20:49:22.937 に答える