Question

描述：我需要从头开始构建一个jQuery / javascript轮播插件。 carrousel功能将由扩展的jQuery函数（$.fn）调用。我将调用carrousel（）或类似的东西。根据我构建方法的方式，它将应用于包含将生成轮播的图片的div或箭头（或开发人员定义为“prev”，“next”按钮的任何内容）移动旋转木马。无论用户点击“上一个”还是“下一个”，都会调用相同的carrousel（）方法，我的代码将决定是否应将图片向右或向左滑动，具体取决于用户点击的内容。

我正在使用数据对象来存储图像，并将所有内容保存在同一个对象中。

问题：无论我的页面上有多少轮播，这个插件都需要工作（我有三个）。我正在使用jQuery .each循环显示带有转盘的箭头，当用户点击该箭头时，我需要使用$(this)或this获取该特定对象并移动父级中的图像div因此。出于某种原因，$(this)上的点击事件无效。当我单击箭头时，我在控制台中看不到任何内容（请参阅下面的代码）。

在第二个版本中，我循环遍历带有图像的div，将箭头放在div s内，并尝试用箭头做一些事情。这也行不通。

问题：如何获取我所拥有的箭头上的每个箭头，并在点击它们时执行操作？（我相信我没有正确使用$(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/

jQuery carousel插件从头开始

1 个答案: