如何逐步向元素添加 2 个类答案

【问题标题】：How can I add 2 classes step by step to an element如何逐步向元素添加 2 个类
【发布时间】：2016-06-09 12:19:12
【问题描述】：

我正在尝试将 x 类和 y 类添加到角度服务/指令中的元素（它必须在脚本中，而不是通过 ng-class）。顺序很关键 - 我希望先添加 x，然后再添加 y - 它需要 2 个步骤。

我确信这会奏效：

$(element).addClass('x');
$timeout(function () {
  $(element).addClass('y');
},0)

但事实证明，有时它并不一致，并且 y 被添加到 x 之前。我认为$timeout 将保证一个 2 步过程 - 但我在问是否有另一种方法来保证它。可能是 DOM 元素上的“onload”或“onupdateClass”事件，我不知道它是否存在？

澄清：最终它是“x y”还是“y x”并不重要。字符串顺序并不重要。重要的是顺序：先添加x，等待添加，然后添加y

【问题讨论】：

$timeout 在这里没有任何意义...一定有其他原因导致问题...
那$(element).addClass('x y');怎么了？？？无论如何，看起来像一个XY问题。也许只是在您调用 sn-p 之前添加了您的 y 类，通过其他方式。仍然不确定为什么订单很关键？！要在调用 sn-p 时获取特定命令，您可以使用：$(element).removeClass('x y').addClass('x y');
$(element).addClass('x').addClass('y'); 如果你不想使用$(element).addClass('x y');
我正在尝试从 {display none;不透明度：0} 到 {display:block;不透明度：1}。它需要 2 个步骤： 1. 添加显示：块；不透明度 0; 2添加不透明度：1.如果我一步添加它，动画将不起作用
@MartijnK 但这与将两个类传递给 addClass() 方法具有完全相同的行为

标签： javascript jquery angularjs dom

【解决方案1】：

试试这样：

$(element).addClass('x');

if ($( element).hasClass('x')) {
     $(element).addClass('y');
}

【讨论】：

没想到！可能是解决方案
这段代码对于提供的上下文没有意义，恕我直言
@A.Wolff 我基本上是在编写一个指令/服务，必须将类按正确的顺序排列。这基本上是它的主要功能。我只是不明白如何确定我分两步操作 DOM。我确信超时会起作用，但这可能不是我想要的防弹
@Alon 然后将类 y 添加到类 x 也是可行的
@guradio 是的，看起来我误解了预期的行为（问题）

【解决方案2】：

如果您想在添加类之间添加延迟，您可以使用queue()，如本例所示：https://stackoverflow.com/a/2510255/390421

【讨论】：

问题是如果y类已经设置在x之前，那么即使使用任何延迟再次添加它也不会有任何效果，这意味着顺序仍然是y x跨度>
我正在尝试不使用 jQuery，只使用带有 angular 的 jqLite。虽然我需要检查队列是否有效，这可能会有所帮助。我确信队列只管理 setTimeout 但它可能会做其他事情

【解决方案3】：

以下function 的想法是基于问题中显示的想法，但它处理重复的setTimeout 和有限的timeouts。如果添加了所有先决条件classes，则此函数添加class 并处理到下一个，如果尚未添加先决条件，则安排自己稍后运行。但是，由于 Javascript 不是多线程的，我认为真正的问题是 y 在添加 x 之前以某种方式添加到元素中。 console.log(element.hasClass(y)) 可能会帮助您。

function addClasses(element, classes, time, index, timeouts) {
    if (index === classes.length) {
        //All classes were added
        return;
    } else if ((index === 0) || (element.hasClass(classes[index - 1]))) {
        //Add the element and process to the next one
        element.addClass(classes[index++]);
        addClasses(element, classes, time, index, timeouts);
    } else {
        //If there are no more shots, then handle the error
        if (--timeouts === 0) {
            //handle error
            return;
        }
        //Schedule the function to run again
        setTimeout(function() {
            addClasses(element, classes, time, index, timeouts);
        }, time);
    }
}

然后你可以像这样使用function：

addClasses($(element), ["x", "y"], 10, 0, 10);

【讨论】：