javascript - 为每个Materialize.css集合着色不同

我当前正在使用Fylipp's Materialize Collection Actions，并且正如标题所示，我试图对我的收藏夹中的不同操作进行不同的着色。我编写了一个脚本（请参见下面的第一个代码块），为每个集合项创建两个动作。由于图标的图像名称是在相应的<i>标记的innerHTML中给出的（并且在香草CSS中无法访问innerHTML），所以我想为每个称为title = innerHTML的图标创建一个额外的属性。然后，我可以在css文件中更改每种颜色（请参见以下代码块的第二部分）。

var $ = require("jquery");

$(document).ready(async function()
{
    await MaterializeCollectionActions.configureActions($('#collection-id'),
    [
        {
            name: 'delete',
            callback: function (collectionItem, collection)
            {
                $(collectionItem).remove();
            }
        },
        {
            name: 'play_arrow',
            callback: function (collectionItem, collection)
            {
                console.log("Played!");
            }
        }
    ]);
    const icons = document.getElementsByTagName("i");
    console.log(icons.length);
    for (let i = 0; i < icons.length; i++)
    {
        const icon = icons[i];
        icon.title = icon.innerHTML;
    }
});

。

i[title = 'delete']
{
     color: grey;
}

i[title = 'play_arrow']
{
     color: #00e676;
}

但是，由于某些原因，icons.length在我运行我的应用程序的大部分时间都是0（一切正常，在大约1/5的时间内都可以正常工作）。不一致的行为向我暗示这是一个异步问题，但是我认为添加async / await命令将意味着const icons = document.getElementsByTagName("i");直到上一个功能完成后才运行。我在这里想念什么吗？

最佳答案

归功于“程序员的环聊” Discord中的“ Jensa”，它提供了以下解决方案：只需在MaterializeCollectionActions.configureActions()中的setTimeout()调用之后包装JS，如下所示：

setTimeout(() => {
  const icons = document.getElementsByTagName("i");
  console.log(icons.length);
  for (let i = 0; i < icons.length; i++)
  {
      const icon = icons[i];
      icon.title = icon.innerHTML;
  }
}, 0);

解决此问题。此工作的原因在这里很好地解释：https://www.youtube.com/watch?v=8aGhZQkoFbQ。本质上，由于setTimeout()是异步函数，因此它将其回调函数中的代码移出堆栈并移到回调队列中，只有在堆栈为空时（即当同步对象运行完毕时）才调用该队列。

关于javascript - 为每个Materialize.css集合着色不同，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/59257986/