javascript - 动态 url 作为 css 和 D3JS 中伪元素的数据属性

Question

我必须动态更改 css 伪元素中链接列表的图标 url。我认为最好的方法是通过属性传递所选图标的链接，但我无法将其用作 url。

CSS

a[data-icon]:before{
padding-right: 5px;
padding-top: 5px;
content:url(attr(data-icon)); 
}

D3JS(我在其中检索 iconURL)

 for (var i = 0; i < JSONclassesInfo.typesList.length; i++){
      if (JSONclassesInfo.typesList[i].name == type){

       temp = JSONclassesInfo.typesList[i].compatible;
       iconRoute= JSONclassesInfo.typesList[i].icon;
      }
    }

    for(var i = 0; i < temp.length; i++){
                d3.select('.dropdown')
                    .append("li")
                    .attr('class','listOpt')
                    .append('a')
                    .text(temp[i])
                    .attr("href","#")
                    .attr('data-icon',iconRoute);


              }

Answer 1

忘记在 URL 的内容中使用 attr() CSS 函数。只需更改此:

 .attr('data-icon',iconRoute);

有了这个:

 .css('background-image',iconRoute);