Question

我有一个列表（动态），其中隐藏了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'));
      }
    }

});

Answer 1

您无法调用幻灯片，因为该功能的范围不是全局的。从就绪呼叫中删除该功能。更好的解决方案，使用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>

Answer 2

将内联更改为jQuery a la'：

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

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

或者与香草JS：

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

};

然后，从你在问题中给出的jQuery块中删除滑动函数，范围问题就消失了。

jQuery的。移动子追加数据

2 个答案: