Question

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

最初我以为我可以添加classClass，延迟/ setTimeOut，然后删除类，但无论我尝试什么，它似乎只是想在我想要的影响是单独循环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()函数应用/删除类。如果您将此代码复制并复制到您的文件中，您应该会看到元素＆＃34;在＆＃34;中生成动画。然后＆＃34;制作动画＆＃34;为了。以这种方式做事假设你为每个元素分配一个唯一的编号，但即使你跳过一个索引仍然可以工作（比如说你分配＃1和＃3，但是忘了分配＃2，它仍然可以工作）。这样您就不必抓取每个元素，将它们添加到数组中，然后根据id号对数组进行排序，以便按顺序对事物进行动画处理。它还允许您通过调整setTimeout()功能上的计时器来自由控制动画的时间。

Answer 2

你应该在开始在循环中应用它们之前从所有li元素中删除该类，而不是仅仅一个元素。$（＆＃34; li.all-floors [id =＆＃39; 1＆＃ 39;]＆＃34;）removeClass（＆＃34;在地板＆＃34）; 尝试，

$("li").removeClass("on-floor");

哦，是的，并确保在每次迭代中将时间增加一秒。 :)这样，

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

为了使效果看起来以时尚的方式应用。

Answer 3

试试这个脚本：

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
        $("li.all-floors[id='1']").removeClass("on-floor");
        var floorValueNum = 10;
        for (var i = 1; i <= floorValueNum; i++) { 
            add(i);
        }
        function add(i) {
            setTimeout(function() {$("li.all-floors[id=" + (i-1) + "]").addClass("on-floor");}, 1000 + i * 1000);
        }
    });
</script>

<style>
.activity-floor-group .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;
}
</style>
</head>
<body>

<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="activity-floor all-floors" id="1">Lobby</li>
      </ul>

</body>
</html>

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

3 个答案: