3

为这个问题的模糊标题道歉！

我有以下 JS，它会查找带有某些来源图像的img标签。然后它用跨度替换img标签，以便我可以用 iconfonts 替换图像/图标。

var paths = [       
    "folder%2Fadd",
    "folder%2Fclear",
    "folder%2Fdelete",
    "folder%2Fedit",
    "folder%2Fmove",
    "folder%2Fsort",
    ];


    var fullPaths = paths.map(function(x) { return "img[src*='" + x + "']"; } );
    var imgs = document.querySelectorAll(fullPaths);

        for (var i = 0; i < imgs.length; i++) {

            var span = document.createElement("span");
            span.addClass("iconfont");
            span.title = imgs[i].parentNode.title;
            imgs[i].parentNode.replaceChild(span, imgs[i]);


        }

到目前为止，一切都运行良好，但还有一个我无法解决的问题。

除了向 .iconfont 的跨度添加一个类之外，我还想向跨度添加两个类 - 1）替换的img元素的原始类，以及 2）我的数组中的图像源名称，但是前面没有“文件夹/”位。

所以，目前我有：

<img class = "tinyicon" src="******/t/edit">

我的脚本在 DOM 中创建了这个：

<span class = "iconfont">

但我希望我的脚本创建以下内容：

<span class = "iconfont tinyicon edit">

这就是我所追求的:)

感谢您的关注！

4

3 回答 3

1 
        var span = document.createElement("span");
        var className = "iconfont " + imgs[i].className + ' ' + imgs[i].src.match(/([a-z])$/i, '')
        span.className  = className ;
        span.title = imgs[i].parentNode.title;
        imgs[i].parentNode.replaceChild(span, imgs[i]);
于 2013-09-09T02:03:53.990 回答
1 
var paths = [       
    "folder%2Fadd",
    "folder%2Fclear",
    "folder%2Fdelete",
    "folder%2Fedit",
    "folder%2Fmove",
    "folder%2Fsort",
    ];


var fullPaths = paths.map(function(x) { return "img[src*='" + x + "']"; } );
var imgs = document.querySelectorAll(fullPaths);

for (var i = 0; i < imgs.length; i++) {
    var img    = imgs[i],
        iClass = img.className,
        iSrc   = img.src.split('/').pop(),
        span   = $('<span />', {'class': 'iconfont '+iClass+' '+iSrc,
                                title  : img.parentNode.title
                 });

    $(img).replaceWith(span);
}
于 2013-09-09T02:00:48.723 回答
1

改变这个：

 var span = document.createElement("span");
 span.addClass("iconfont");

对此：

 var span = document.createElement("span");
 span.className = "iconfont tinyicon edit";

无论如何你addClass()都不会工作，因为 span 是一个 DOM 节点，而不是一个 jQuery 对象。

于 2013-09-09T02:01:10.957 回答