簡單的jQuery滑塊

Question

我想用一個腳本來製作一個簡單的滑塊。在jsfiddle上完美工作，但不是當我複製/粘貼網上的每一個parte時，我正在做...有什麼問題？ 我將不勝感激任何幫助。

感謝

var $first = $('li:first', 'ul'), 
 
    $last = $('li:last', 'ul'); 
 
$("#next").click(function() { 
 
    var $next, $selected = $(".selected"); 
 

 

 
    $next = $selected.next('li').length ? $selected.next('li') : $first; 
 
    $selected.removeClass("selected"); 
 
    $next.addClass('selected'); 
 
}); 
 

 
$("#prev").click(function() { 
 
    var $prev, $selected = $(".selected"); 
 

 
    $prev = $selected.prev('li').length ? $selected.prev('li') : $last; 
 
    $selected.removeClass("selected"); 
 
    $prev.addClass('selected'); 
 
});

li {display:none} 
 

 
.selected {display:block; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<button id="prev">Previous</button> 
 
<button id="next">Next</button> 
 
<div> 
 
<ul id=""> 
 
<li id="pic1"><img src="http://www.cooksmarts.com/wp-content/uploads/2015/09/Pantry-Essentials-Lemons-400x250.jpg" alt="pic1"></li> 
 
<li id="pic2"><img src="https://tendertummys.com/wp-content/uploads/tomatoes-2.jpg" alt="pic2"></li> 
 
<li id="pic3"><img src="http://med.news.am/static/news/b/2014/08/3031.jpg" alt="pic3"></li> 
 
</ul> 
 
</div>

Dropbox link to the page

Answer 1

你必須確保DOM是操作之前準備就緒。
可能jsfiddle注意JavaScript在DOM準備就緒後執行。
您有兩種選擇：將腳本標記移動到body標記之前，或者將代碼封裝在DOM（ready）之後調用的$（document）.ready（）回調函數中。

$(document).ready(function() { 
    var $first = $('li:first', 'ul'), 
     $last = $('li:last', 'ul'); 

    $("#next").click(function() { 
     var $next, $selected = $(".selected"); 

     $next = $selected.next('li').length ? $selected.next('li') : $first; 
     $selected.removeClass("selected"); 
     $next.addClass('selected'); 
    }); 

    $("#prev").click(function() { 
     var $prev, $selected = $(".selected"); 

     $prev = $selected.prev('li').length ? $selected.prev('li') : $last; 
     $selected.removeClass("selected"); 
     $prev.addClass('selected'); 
    }); 
});