javascript - Jquery Addclass/Removeclass 基于 id 属性的特定顺序

Question

我将 addClass 附加到一组具有相同类的元素。但是，我需要根据 ID 属性以特定顺序完成它。我一直在尝试 for 循环和 addClass 基于在循环编号处具有 ID 的元素。但是，这最终一次应用了 addClass，我需要它根据循环一次执行一个。我怎样才能做到这一点？

最初我认为我可以 addClass、delay/setTimeOut，然后 removeClass，但无论我尝试什么，当我想要的影响是单独循环 ID 和 addClass 时，它似乎只想立即应用于所有元素，延迟，removeClass。

$("li.all-floors[id='1']").removeClass("on-floor");
 for (var i = 1; i <= floorValueNum; i++) {                                     

setTimeout(function() {
    	$("li.all-floors[id=" + (i-1) + "]").addClass("on-floor");
}, 1000);

            }

.on-floor{
    
    color: red;
           
}

.housing-floor {
    margin: 0;
    padding: .25em 2em;
    border-top: 2px solid #FFFFFF;
    text-align: center;
    line-height: 1em;
    font-size: .75em;
    text-align: center;
    color: black;
    font-weight: bold;
        -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}
.activity-floor {
    margin: 0;
    padding: .4em 2em;
    border-top: 2px solid #FFFFFF;
    text-align: center;
    line-height: 1.5em;
    font-size: .75em;
    text-align: center;
    color: black;
    font-weight: bold;
        -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}

.activity-floor-group, .housing-floor-group{
    list-style: none;
    padding: 0;
    margin: 0;
  float:left;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<ul class= "housing-floor-group">
              <li class="housing-floor all-floors" id="42">42</li>
              <li class="housing-floor all-floors" id="40">40</li>
              <li class="housing-floor all-floors" id="38">38</li>
              <li class="housing-floor all-floors" id="36">36</li>
              <li class="housing-floor all-floors" id="34">34</li>
              <li class="housing-floor all-floors" id="32">32</li>
              <li class="housing-floor all-floors" id="30">30</li>
              <li class="housing-floor all-floors" id="28">28</li>
              <li class="housing-floor all-floors" id="26">26</li>
              <li class="housing-floor all-floors" id="24">24</li>
              <li class="housing-floor all-floors" id="22">22</li>
              <li class="housing-floor all-floors" id="20">20</li>
              <li class="housing-floor all-floors" id="18">18</li>
              <li class="housing-floor all-floors" id="16">16</li>
              <li class="housing-floor all-floors" id="14">14</li>
              <li class="housing-floor all-floors" id="12">12</li>
              <li class="housing-floor all-floors" id="10">10</li>
              <li class="housing-floor all-floors" id="8">08</li>
              <li class="housing-floor all-floors" id="6">06</li>
            </ul>
            <ul class= "housing-floor-group">
              <li class="housing-floor all-floors" id="43">43</li>
              <li class="housing-floor all-floors" id="41">41</li>
              <li class="housing-floor all-floors" id="39">39</li>
              <li class="housing-floor all-floors" id="37">37</li>
              <li class="housing-floor all-floors" id="35">35</li>
              <li class="housing-floor all-floors" id="33">33</li>
              <li class="housing-floor all-floors" id="31">31</li>
              <li class="housing-floor all-floors" id="29">29</li>
              <li class="housing-floor all-floors" id="27">27</li>
              <li class="housing-floor all-floors" id="25">25</li>
              <li class="housing-floor all-floors" id="23">23</li>
              <li class="housing-floor all-floors" id="21">21</li>
              <li class="housing-floor all-floors" id="19">19</li>
              <li class="housing-floor all-floors" id="17">17</li>
              <li class="housing-floor all-floors" id="15">15</li>
              <li class="housing-floor all-floors" id="13">13</li>
              <li class="housing-floor all-floors" id="11">11</li>
              <li class="housing-floor all-floors" id="9">09</li>
              <li class="housing-floor all-floors" id="7">07</li>
            </ul>
            <ul class="activity-floor-group">
                <li class="activity-floor all-floors" id="5">Pool</li>
                <li class="activity-floor all-floors" id="4">Gym</li>
                <li class="activity-floor all-floors" id="3">Restaurant</li>
                <li class="activity-floor all-floors" id="2">Meeting Rooms</li>
                <li class="on-floor activity-floor all-floors" id="1">Lobby</li>
      </ul>

Answer 1

这里有一种方法:

创建一个递归函数并通过 setTimeout()设置一个小的延迟

$(document).ready(function(){


    // Use a counting variable to run through ids: (.all-floors #<1,2,3...>)
    // This method lets you run the animation in order, without sorting.
    var intervalCount = 1;
    var totalObjects = $(".all-floors").length;

    // Iterate through the all-floors objects, one-by-one via recursion
    function animateNextItem(){

        if (intervalCount >= totalObjects) return;

        // Grab the element according to its id number
        var element = $("#"+intervalCount);

        // If the element is an actual all-floor object
        if (element && element.hasClass("all-floors")){

            // add the class
            element.addClass("on-floor");

            // Set timer on when to remove the class, increase the 
            // intervalCount and call this function again
            setTimeout( function(){
                element.removeClass("on-floor");
                intervalCount++;
                animateNextItem();
                }, 500);    

        } else {

            // If you get here, it means that there wasn't an
            // .all-floors object with an id = intervalCount. So 
            // increase the intervalCount by one and try again
            intervalCount++;
            animateNextItem();  
        }
    }

    // Start the whole process here
    animateNextItem();

});

SEE THE CODE IN ACTION ON JSFIDDLE

基本上，您使用计数变量按顺序遍历 id 列表，并调用递归函数以通过 setTimeout() 函数应用/删除类。如果您将此代码复制并粘贴到您的文件中，您应该会看到元素依次“动画化”和“动画化”。以这种方式做事假设你为每个元素分配了一个唯一的数字，但即使你跳过索引仍然有效(假设你分配了#1 和#3，但忘记分配#2，它仍然有效)。这使您不必抓取每个元素，将它们添加到数组，然后根据 id 编号对数组进行排序以按顺序设置动画。它还使您可以通过调整 setTimeout() 函数上的计时器来自由控制动画的时间。