JQuery

Question

我一直在尝试从头开始构建一个图像滑块，它会自动滑动，但当单击底部的相应点时会转到特定幻灯片。

当我单独隔离并测试我的每个事件委托点击功能时，它们非常适合让不同的照片来回滑动。但是当所有功能都在一起时，只有第三个功能起作用。你能帮我吗？

为了演示，我制作了一个 simple mock-up slider here，其中包括以下 JavaScript/jQuery：

'use strict';

$(document).ready(function () {

//DOM cache 
var $slider = $('section');
var $slideContainer = $slider.find('ul');
var $windowWidth = $slider.css('width');
var $windowWidthUnitless = $slider.width();
var $dot1 = $slider.find('#dot-1');
var $dot2 = $slider.find('#dot-2');
var $dot3 = $slider.find('#dot-3');

//config
var width = $windowWidth;
var doubleWidth = $windowWidthUnitless * 2;

$($slider).on('click',$dot1,function() {
    $slideContainer.css('margin-left', 0);
    $dot1.addClass('filled');
    $dot2.removeClass('filled');
    $dot3.removeClass('filled');
})

$($slider).on('click',$dot2,function() {
    $slideContainer.css('margin-left', '-' +width);
    $dot1.removeClass('filled');
    $dot2.addClass('filled');
    $dot3.removeClass('filled');
})

$($slider).on('click',$dot3,function() {
    $slideContainer.css('margin-left', "-" +doubleWidth +"px");
    $dot1.removeClass('filled');
    $dot2.removeClass('filled');
    $dot3.addClass('filled');
})

});

对此html采取行动：

<section>
<ul>
    <li>
        <div id="slide-1"></div>
    </li>
    <li>
        <div id="slide-2"></div>
    </li>
    <li>
        <div id="slide-3"></div>
    </li>
    <li>
        <div id="slide-1"></div>
    </li>
</ul>
<div class="selected" id="dot-1"></div>
<div id="dot-2"></div>
<div id="dot-3"></div>

和CSS

* {
margin: 0;
padding: 0;
} /* just my default */

section {
overflow: hidden;
width:400px;
height:400px;
}

section ul {
width:1600px;
}

section li {
list-style-type: none;
display: inline;
float: left;
}

[id*="slide-"] {
height: 400px;
width: 400px;
}

[id*="dot-"] {
float:left;
height: 40px;
width: 40px;
border-radius: 20px;
position: relative;
bottom: 45px;
}

（如果这有帮助，这是我的滑块的 more exact but still simplified 版本，它实际上也会自动滑动，并且意味着在单击某个点时停止并转到特定幻灯片。同样，它只会移动到最后一张幻灯片。）

Answer 1

在每一 $($slider).on('click',$dotNumber,function() {...} 行中，将 $dotNumber 替换为 '#dot-number'。

示例：$($slider).on('click','#dot-1',function() {...}

我不知道是否有特定的方法来传递 jQuery 对象以指定要定位的子元素，但我知道添加 CSS 选择器作为第二个参数将做吧。根据man page，第二个参数（如果不是回调）是一个字符串。

JQuery - 事件委托系列中只有最后一个事件处理程序触发？

JQuery - only last event handler triggers in event delegation series?

javascript

slider

event-handling

mouseevent