從頭開始的jQuery傳送帶插件

Question

描述：我需要從頭構建一個jQuery/JavaScript傳送帶插件。 carrousel功能將通過擴展jQuery函數（$.fn）調用，我將調用carrousel（）或類似的東西。根據我如何構建該方法，它將應用於包含將旋轉木馬的圖片的div或應用於移動旋轉木馬的箭頭（或開發人員定義爲「prev」，「next」按鈕）的圖片。 無論用戶點擊「上一個」還是「下一個」，都會調用相同的carrousel（）方法，我的代碼將根據用戶點擊的內容決定是將圖片滑動到右側還是左側。

我正在使用數據對象來存儲圖像，並保持所有包裹在同一個對象。

問題：無論我的頁面上有多少傳送帶（我有三個），此插件都需要工作。我正在使用jQuery。每個循環通過將具有卡魯塞爾的箭頭，並且當用戶單擊該箭頭時，我需要使用$(this)或this來獲取該特定對象，並相應地在父div中移動圖像。由於某種原因，$(this)上的點擊事件不起作用。當我點擊箭頭時，在控制檯中看不到任何東西（請參閱下面的代碼）。

在第二個版本中，我通過具有圖像的div進行循環，得到這些箭頭的內部箭頭，並嘗試用箭頭執行某些操作。這也是行不通的。

問題：我如何獲得箭頭集合上的每個單獨的箭頭，並在點擊時執行某些操作？ （我相信我沒有正確使用$(this)）。

注意：帶圖片的div具有包含圖像的data-images屬性。 注：箭頭是img標籤與data-direcion屬性（一個或下一個）

這裏是代碼我迄今：

HTML

<article class="resources"> 
     <section class="resources_headings"> 
      <div> 
       <h2>2/ Resources</h2> 
      </div> 
      <div> 
       <h4>Our Physicians have the latest tools at their fingertips.</h4> 
      </div> 
     </section> 
     <section class="innovator"> 
      <div> 
       <h3>Innovator</h3> 
       <p>Nullam accumsan lorem in dui. Phasellus leo dolor, tempus non, auctor et, hendrerit quis, nisi. Quisque malesuada placerat nisl</p> 
      </div> 
      <div data-images='["images/resources/innovator_s.jpg","images/resources/results_s.jpg","images/resources/tests_s.jpg","images/resources/lab_s.jpg"]' class="innovator_wrapper slider"> 
       <img data-direction="previous" src="images/icons/chevron_left.png" alt="chevron_left" class="chevron_resources innovator_previous mobile direction"> 
       <img data-direction="next" src="images/icons/chevron_right.png" alt="chevron_right" class="chevron_resources innovator_next mobile direction"> 
       <img src="images/resources/innovator_s.jpg" alt="innovator" class="resources_images innovator"> 
       <div id="caption_overlay"> 
        <span>New technologies</span><img src="images/icons/chevron_left.png" alt="chevron_left" class="chevron_resources innovator_previous"><img src="images/icons/chevron_right.png" alt="chevron_right" class="chevron_resources innovator_next"> 
       </div> 
      </div> 
     </section> 
     <section class="facilities"> 
      <div> 
       <h3>Facilities</h3> 
       <p>Nullam accumsan lorem in dui. Phasellus leo dolor, tempus non, auctor et, hendrerit quis, nisi. Quisque malesuada placerat nisl. Et, hendrerit quis, nisi. Quisque malesuada placerat nisl.</p> 
      </div> 
      <div data-images='["images/resources/lab_s.jpg","images/resources/innovator_s.jpg","images/resources/results_s.jpg","images/resources/tests_s.jpg", "images/resources/physicians_s.jpg"]' class="facilities_wrapper slider"> 
       <img data-direction="previous" src="images/icons/chevron_left.png" alt="chevron_left" class="chevron_resources facilities_previous mobile direction"><img data-direction="next" src="images/icons/chevron_right.png" alt="chevron_right" class="chevron_resources facilities_next mobile direction"> 
       <img src="images/resources/hallway_s.jpg" alt="hallway" class="resources_images facilities"> 
       <div id="caption_overlay"> 
        <span>World Class Facilities</span><img src="images/icons/chevron_left.png" alt="chevron_left" class="chevron_resources facilities_previous"><img src="images/icons/chevron_right.png" alt="chevron_right" class="chevron_resources facilities_next"> 
       </div> 
      </div> 
     </section> 
     <section class="simulation"> 
      <div> 
       <h3>Training Simulation</h3> 
       <p>Tempus non, auctor et, hendrerit quis, nisi. Quisque malesuada placerat nisl. Nullam accumsan lorem in dui. Phasellus leo dolor, nullam accumsan</p> 
      </div> 
      <div data-images='["images/resources/innovator_s.jpg","images/resources/lab_s.jpg", "images/resources/results_s.jpg","images/resources/tests_s.jpg"]' class="simulation_wrapper slider"> 
       <img data-direction="previous" src="images/icons/chevron_left.png" alt="chevron_left" class="chevron_resources simulation_previous mobile direction"><img data-direction="next" src="images/icons/chevron_right.png" alt="chevron_right" class="chevron_resources simulation_next mobile direction"> 
       <img src="images/resources/lab_s.jpg" alt="lab" class="resources_images simulation"> 
       <div id="caption_overlay"> 
        <span>Real Life Simulations</span><img src="images/icons/chevron_left.png" alt="chevron_left" class="chevron_resources simulation_previous"><img src="images/icons/chevron_right.png" alt="chevron_right" class="chevron_resources simulation_next"> 
       </div> 
      </div> 
     </section> 
    </article> 

jQuery的版本1：循環通過箭頭（'img.direction'）獲得$（this），當它被點擊時（爲了清晰起見，不使用$ fn）：

$(function() { 
    $('img.direction').each(function(){ 
    var self = $(this);//returns the objects for the 6 arrows 
    console.log(self);//works fine 

    //get the slider directions (previous or next) 
    var directions = $(this).data('direction');//works fine 

    $(this).on('click', function(){ //this doesn't work 
     console.log('directions');//nothing shows on the console when I click the arrows 
    }); 

    //get images in each div 
    var slideContainer = $(this).closest('.slider').data('images');//this works 
    console.log(slideContainer);//this works 
}); 

}）;

jQuery版本2：通過具有圖片的div（.slider）循環，獲取該div內的箭頭，使用$（this）獲取數據方向，並根據方向移動圖像：

$(function() { 
    $('.slider').each(function(){ 
    //get images in each div 
    var images = $(this).data('images');//works 
    console.log(images.length); 

    //get the slider controllers (direction arrows) 
    var directions = $(this).find('img.direction');//works 
    console.log(directions); 

     //loop through all arrows and get them by index 
     directions.each(function(index){ 
      // console.log(directions[index]); 

      $(this).on('click',function(){//doesn't work 
       var direction = $(this).data('direction'); 
       console.log('direction'); 
       if(direction==='next'){ 
        console.log('next'); 
       } 
       else{ 
        console.log('previous'); 
       } 
      }); 

     }); 
    }); 
}); 

非常感謝！

Answer 1

怎麼是這樣的：

$(".slider .direction").click(function(){ 
    var direction = $(this).data("direction"); 
    var images = $(this).parent().data("images"); 
    console.log(direction, images); 
}); 

有些工作小提琴（無圖像）： http://jsfiddle.net/alan0xd7/40optfdw/