0

我有一个列表（动态），其中隐藏了 FIRST LI，但它包含的数据插入到上面的 div 标题中。我有两个可以上下移动列表的锚点。

我试图让它用户点击，第二个列表项移动到列表的顶部（并且它的数据被附加到标题中）并且实际的 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，因为函数的作用域不是全局的。从就绪调用中删除该函数。更好的解决方案，使用 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 回答