簡単なjqueryスライダー

Question

私は簡単なスライダーを作るために1つのスクリプトを使用しようとしています。 jsfiddleで完璧に動作しますが、私が作っているWeb上のすべての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は、DOMの準備ができてからjavascriptが実行されるように注意してください。
bodyタグの直前でスクリプトタグを移動するか、DOMの準備ができた後に呼び出される$（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'); 
    }); 
});