Question

问题在下面的代码中，假设我想要更改单元格1,2和4的颜色，那么它们会以不同的间隔更改颜色。（先说1改变然后2改变然后4改变）

我想让所有人（1,2和4）同时改变颜色。看起来所有（1,2和4）都是红色，然后所有3个都是蓝色。

这里temp_array将拥有我必须改变颜色的单元格（比如temp_array将有1,2和4。

 function startChangingColor()
       {
            var temp;
            for(var i=0;i<temp_array.length;i++)
            {
                temp = temp_array[i];
                intervalid[i] = setInterval( createCB(temp) ,300);
            }
        }
        function createCB( val )
        {
           return function()
           {
              changeColor( val );
           };
        }

        var flag = true; 
        function changeColor (element)
        {
            if(flag==true)
            {
                 document.getElementById(CELL+element).className='redled';
                 flag=false;
            }
            else if (flag==false)
            {
                 document.getElementById(CELL+element).className='grayled';
                flag = true;
            }
        }

Answer 1

不知道我是否正确阅读，但试试这个：

var
  cells = document.getElementsByTagName('td'),
  tempArray = [[0, 1, 3], [1, 2, 0]];

var createColorChanger = function (classNames, elements, elementSelection) {
  var currentIndex = 0;

  return function () {
    var className = classNames.shift(), i = 0, lim = elements.length;
    classNames.push(className);

    for (; i < lim; i += 1) {
      elements[i].className = elementSelection[currentIndex].indexOf(i) > -1 ? className : '';
    }

    currentIndex += 1;
    if (currentIndex >= elementSelection.length) {
      currentIndex = 0;
    }
  }
};

setInterval(createColorChanger(['grayled', 'redled'], cells, tempArray), 1000);

演示：http://jsfiddle.net/NZPTE/3/

Answer 2

由于您使用相同的问题创建了多个主题，我将在此主题中给出与上一个主题相同的答案。

原始答案

您正在使用相同的标志，这可能导致某种锁定。最简单的解决方案是为第二个版本添加另一个标志 - 但是只用一个间隔函数就不会更好吗？如果我是你，我可能也想要缓存元素，而不是在每个时间间隔进行查找。

更新

从（删除）注释中，您想要将元素动态添加到相同的区间函数中吗？我为你写了一个小插件（是的，在工作中缓慢而无聊的一天）。您可以在运行时添加元素并更改CSS类名，甚至可以停止间隔。虽然只在FireFox中测试过，但它是标准的JS，应该适用于大多数浏览器...

JavaScript文件

(function (window, document, undef) {

    var CB = {};

    if (typeof window.CB !== typeof undef) {
        return;
    }

    CB = function () {

        var elements   = [],
            classes    = ['first-round', 'second-round'],
            intervalId = 0;


        var flag     = 0;
        var switcher = function () {

            for (var i = 0; i < elements.length; i++) {
                elements[i].className = classes[flag];
            }

            flag = 1 - flag;

        };


        return {

            setClasses: function (first, second) {

                classes = [first, second];

            },

            addElement: function (element) {

                elements.push(element);

            },

            init: function (element, firstClass, secondClass) {

                this.addElement(element);
                this.setClasses(firstClass, secondClass);

                return this;

            },

            start: function (interval) {

                intervalId = setInterval(switcher, interval);

            },

            stop: function () {

                clearInterval(intervalId);

            }

        }

    }();

    window.CB = CB;

})(window, document);

带有使用示例的HTML测试页

测试在运行时添加了两个额外元素（5秒超时），并且还更改了类

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />

        <style>

            .container {
                width: 600px;
                margin: 50px auto;
            }
                .container > div {
                    width: 300px;
                    height: 50px;
                    float: left;
                }
                .container .clear {
                    clear: both;
                    float: none;
                    width: 0;
                    height: 0;
                }

            .first-class {
                background-color: red;
            }
            .second-class {
                background-color: blue;
            }

            .new-first-class {
                background-color: black;
            }
            .new-second-class {
                background-color: grey;
            }

        </style>

    </head>
    <body>

        <div class="container">
            <div id="Id1">

            </div>

            <div id="Id2">

            </div>
            <div class="clear"></div>
        </div>

        <div class="container">
            <div id="Id3">

            </div>
            <div id="Id4">

            </div>
            <div class="clear"></div>
        </div>

        <script src="CB.js"></script>
        <script>

            window.onload = function () {

                CB.init(document.getElementById('Id1'), 'first-class', 'second-class');
                CB.addElement(document.getElementById('Id2'));

                CB.start(120);

                setTimeout(function () {

                    CB.addElement(document.getElementById('Id3'));
                    CB.addElement(document.getElementById('Id4'));
                    CB.setClasses('new-first-class', 'new-second-class');

                }, 5000);

            };

        </script>

    </body>
</html>

SetInterval更改单元格颜色的时间

2 个答案:

原始答案