Javascript jQuery。移动子附加数据

我有一个列表（动态），其中第一个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>

---

您不能调用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>

---

将内联更改为jQuery a la'：

$（“.subtitle”）。单击（幻灯片（向上）；）


或搭配香草JS：

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

};

然后，从您在问题中给出的jQuery块中删除slide函数，范围问题就会消失
 您在Javascript控制台中没有收到错误吗？是的，它显示为未定义，我更改了下面提到的函数名，仍然未定义，因为它不是一个全局函数，就像我的回答状态一样。而不是
.css（'display'，'none'）
您只需使用
.hide（）
。
document.getElementById('.subtitle').onmousedown = function() {
    slide();

};