jQuery。移動子添加數據

我有一個列表（動態），其中FIRST LI隱藏，但它包含的數據插入上面的div標題。我有兩個可以上下移動列表的錨。jQuery。移動子添加數據

我想讓它使用戶點擊，第二個列表項移動到列表的頂部（並將其數據添加到標題中），並且實際的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')); 
     } 
    } 

});

來源

2013-10-22 user934902

是不是在Javascript控制檯中出現錯誤？ – Barmar

雅它出現未定義，我改變了函數名稱，如下所述仍然未定義 – user934902

因爲它不是一個全局函數，就像我的答案狀態。 – epascarello

你可以不要調用幻燈片，因爲函數的範圍不是全局的。從就緒呼叫中刪除該功能。更好的解決方案，使用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-22 20:33:49 epascarello

更改內聯到jQuery的一拉」：

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

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

或者香草JS：

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

};

然後，你在你的問題給出了jQuery塊去掉滑動功能和範圍問題消失。

來源

2013-10-22 20:49:22 baordog

jQuery。移動子添加數據

回答

相關問題