Question

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

有四个框架（＃a1-＃a4）根据名为“内容”的DIV进行移动。这是我试图添加的元素的代码，用于跟踪用户所在的位置。

HTML

<div id="content">
<div id="indicator">
<div id="dot" class="selected" onClick="location.href='#a1'"></div>
<div id="dot" class="unselected" onClick="location.href='#a2'"></div>
<div id="dot" class="unselected" onClick="location.href='#a3'"></div>
<div id="dot" class="unselected" onClick="location.href='#a4'"></div>
</div>
</div>

CSS

#content {
width:100%;
height:32px;
background-color:red;
}
#indicator {
float:left;
position:absolute;
display:table;
left:5.5%;
top:74%;
margin:0;
text-align: center;
-moz-user-select:none;
-webkit-user-select:none;
z-index:10;
}
#dot {
float:left;
width:16px;
height:16px;
margin-left:8px;
background-color:#D7D7D7;
}
#dot:hover {
background-color:#FFF;
cursor:pointer;
}
#dot.selected {
background-color:#787878;
}
#dot.unselected {
background-color:#D7D7D7;
}

的Javascript

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

Fiddle还有一个例子。

Answer 1

将dot从 ID 更改为类并尝试以下操作：

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

jsFiddle

id在HTML文档中应该是唯一 class应该用于重复使用选择器。

<强>更新
@gabereal是对的。我误解了这个问题。但是，在$(".dot").click上也可以使用该功能。

Answer 2

一般来说， id 应该用于唯一元素，也就是说你不应该＆＃ 39;页面上有多个ID。如果您要定位多个元素，请使用类。

由于你想在点击#content div之后定位指标点，@ Nelu回答不会起作用。相反，你可以这样做：

$(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");
        }
    }
});

请参阅fiddle

使用jQuery DIV跟踪幻灯片

2 个答案: