Question

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

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

为了演示我创建了一个包含以下JavaScript / jQuery的simple mock-up slider here：

'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选择器添加为第二个参数就可以了。根据{{3}}，第二个参数（如果它不是回调）是一个字符串。

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

1 个答案: