使用基于Id的循环设置类

set classes with a loop based on a Id

本文关键字：循环 设置 Id      更新时间：2023-09-26

我制作了一个带有菜单的常规图像滑块。

如果滑块在幻灯片#3上，菜单将如下所示：（这是带有幻灯片Id的菜单按钮）

3 4 5 1 2

当前幻灯片总是第一张，下一张是下一张，第一张在最后一张之后。

因此，如果幻灯片#4是最新的，菜单将如下所示：

4 5 1 2 3

现在我想为每一个设置一个类。因此，顺序中的第一个有一个类，如"position1"和下一个"position2"等。

每次更改幻灯片时都会调用此函数，变量currentSlide包含currentSlide id。

function setMenuColors(currentSlide) {
    jQuery('#slider-menu'+currentSlide).removeClass().addClass('slider-menu-item position1');
}

在jquery为当前幻灯片设置类之后，某种循环应该为接下来的四张幻灯片设置类，但我不知道该怎么做。

有人有什么想法吗？

编辑：菜单的HTML如下所示：

<ul id="slider-menu-content">
    <li id="slider-menu1" class="slider-menu-item position1">slide menu button 1</li>
    <li id="slider-menu2" class="slider-menu-item position2">slide menu button 2</li>
    <li id="slider-menu3" class="slider-menu-item position3">slide menu button 3</li>
    <li id="slider-menu4" class="slider-menu-item position4">slide menu button 4</li>
    <li id="slider-menu5" class="slider-menu-item position5">slide menu button 5</li>
    <li id="slider-menu1" class="slider-menu-item position1">slide menu button 1</li>
    <li id="slider-menu2" class="slider-menu-item position2">slide menu button 2</li>
    <li id="slider-menu3" class="slider-menu-item position3">slide menu button 3</li>
    <li id="slider-menu4" class="slider-menu-item position4">slide menu button 4</li>
    <li id="slider-menu5" class="slider-menu-item position5">slide menu button 5</li>
</ul>

双字符是由jQuery创建的，因此菜单可以无缝循环。元素的顺序不变。

想象你有一个像这样的结构

<div id="container">
   <div>1</div>
   <div>2</div>
   <div>3</div>
   <div>4</div>
   <div>5</div>
</div>

你可以

$("#container").children("div").removeClass().addClass("slider-menu-item");
$("#container").children("div :first").addClass("first");

例如，请参见：http://jsfiddle.net/VAMhu/

相关文章：