Description ：我需要从头开始构建一个jQuery / javascript轮播插件 . carrousel功能将由扩展的jQuery函数调用（ $.fn ）我将调用carrousel（）或类似的东西 . 根据我构建方法的方式，它将应用于 div ，其中包含将创建轮播的图片或箭头（或开发人员定义为"prev"，"next"按钮）移动轮播的图片 . 无论用户点击"previous"或"next"，都会调用相同的carrousel（）方法，我的代码将决定是否应将图片向右或向左滑动，具体取决于用户点击的图片 .
我正在使用数据对象来存储图像并将所有内容保存在同一个对象中 .
Problem ：这个插件需要工作，无论我的页面上有多少轮播（我有三个） . 我正在使用jQuery .each循环显示将带有转盘的箭头，当用户单击该箭头时，我需要使用 $(this) 或 this 获取该特定对象，并相应地移动父级 div 中的图像 . 出于某种原因， $(this) 上的click事件不起作用 . 当我单击箭头时，我在控制台中看不到任何内容（请参阅下面的代码） .
在第二个版本中，我循环遍历具有图像的 div ，将箭头放在那些 div 中，并尝试用箭头做某事 . 这也行不通 .
Question ：如何获得我所拥有的箭头上的每个箭头，并在点击它们时执行操作？ （我相信我没有正确使用 $(this) ） .
注意：带有图片的 div 具有包含图像的 data-images 属性 . 注意：箭头是具有 data-direcion 属性的 img 标签（上一个或下一个）
这是我到目前为止的代码：
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 version 1: loop through the arrows ('img.direction') and get $(this) when it is clicked (not using the $fn here for clarity):
$(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 version 2: loop through the divs (.slider) that have the pictures, get the arrows inside that div, use $(this) to get the data-direction, and do move the images depending on the direction:
$(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');
}
});
});
});
});
非常感谢！
1 回答
这样的事情怎么样：
有点工作的小提琴（没有图片）：http://jsfiddle.net/alan0xd7/40optfdw/