Question

对这个问题的模糊标题表示道歉！

我有以下JS，它会查找包含某些来源图片的 img 标记。然后用 span 替换 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的 span 中添加一个类之外，我还想在 span 中添加两个类 - 1）替换的原始类< strong> img 元素，以及2）我的数组中的图像源名称，但前面没有'folder /'位。

所以，目前我有：

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

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

<span class = "iconfont">

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

<span class = "iconfont tinyicon edit">

这就是我所追求的：）

感谢您一看！

Answer 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);
}

Answer 2

改变这个：

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

到此：

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

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

Answer 3

        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]);

Javascript正则表达式类名问题

3 个答案: