使用jQuery DIVs跟踪幻灯片放映

Javascript中是否有明确的方法来更改一系列div，以便跟踪幻灯片当前在一系列中的位置

有四个帧（#a1-#a4）可以根据对名为“content”的DIV的单击来移动。下面是我试图添加到跟踪用户所在位置的元素的代码

HTML

Javascript

$(document).ready(function () {
$("#content").click(function () {
$("#dot").toggleClass("selected unselected");
$("#dot").siblings().toggleClass("selected unselected");
});
});

---

还有一个例子是。

将

点

从id更改为类，然后尝试以下操作：

$(document).ready(function () {
    $(".dot").click(function () {
        $(this).addClass("selected").removeClass("unselected");
        $(this).siblings().addClass("unselected").removeClass("selected");                
    });
});

id

在HTML文档中应该是唯一的。

class

应用于重复使用的选择器

---

更新：
@加贝雷尔是对的。我误解了这个问题。

---

但是，在

$（“.dot”）上具有功能会很有用。也可以单击
。
一般来说，一个id应用于唯一的元素，也就是说，您不应该在一个页面上有多个id。如果要针对多个元素，请使用class

由于您希望在点击#content div之后以指示点为目标，@Nelu answer将无法工作。相反，您可以这样做：

$(document).ready(function () {
    $("#content").click(function () {
        slideTrackIndicator();
    });
    function slideTrackIndicator(){
        var numDots = $(".dot").length,
            $currentDot = $('.selected'),
            currentDotNumber = $currentDot.index();
        if (currentDotNumber < numDots - 1) {
            $currentDot.toggleClass("selected unselected").next().toggleClass("selected unselected");
        } else {
            $currentDot.toggleClass("selected unselected").siblings().eq(0).toggleClass("selected unselected");
        }
    }
});

$（文档）.ready（函数（）{
$（“#内容”）。单击（函数（）{
slideTrackIndicator（）；
});
函数slideTrackIndicator（）{
var numDots=$（“.dot”）.length，
$currentDot=$（'.selected'），
currentDotNumber=$currentDot.index（）；
如果（currentDotNumber

看
这太棒了，加贝雷尔。但是，用户也可以后退。是否有方法编写.previous toggleClass来处理这种向后移动？如果它们也可以向后移动，那么必须有一个目标元素，您可以在某个地方放置一个类或id，以便在单击处理程序中侦听。大多数实现都有一个
和
元素，您可以将click函数绑定到其中，其中sometag是div、span、anchor等。在这种情况下，您可以相应地更改
slideTrackIndicator（）
函数中的if和else语句。是的，jquery中有一个prev方法，我为每一步的后退或前进添加了一个“backbutton”和一个“nextbutton”。但是，如果用户从初始开始返回，所有点都会消失。有没有一种方法可以改变这一点？前面的例子有故障，但这里有点混乱：看起来这变成了一个完全不同的问题。你可能应该编辑你的问题，我必须更新我的答案。。。
$(document).ready(function () {
    $(".dot").click(function () {
        $(this).addClass("selected").removeClass("unselected");
        $(this).siblings().addClass("unselected").removeClass("selected");                
    });
});

$(document).ready(function () {
    $("#content").click(function () {
        slideTrackIndicator();
    });
    function slideTrackIndicator(){
        var numDots = $(".dot").length,
            $currentDot = $('.selected'),
            currentDotNumber = $currentDot.index();
        if (currentDotNumber < numDots - 1) {
            $currentDot.toggleClass("selected unselected").next().toggleClass("selected unselected");
        } else {
            $currentDot.toggleClass("selected unselected").siblings().eq(0).toggleClass("selected unselected");
        }
    }
});