javascript - 我的图像替换 javascript 需要更多帮助 - 将数组对象添加为类

Question

抱歉，这是关于我的 javascript 图像替换脚本的另一个问题。到目前为止，在 stackexchangers 的帮助下，我已经做到了这一点，而且效果很好。但现在我需要做另一个小改变:

    var paths = ["add","clear","copy","delete"];


    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   = @@@THE CORRESPONDING NAME IN THE ARRAY@@@,
            span   = $('<span />', {'class': 'iconfont '+iClass+' '+iSrc,
                                    title  : img.parentNode.title
                     });

        $(img).replaceWith(span);
    }

我要iSrc是数组中图像的名称。这样当图像带有<src="edit.png" class="iconmini>时被替换，跨度具有类:.iconfont , .iconmini , 和, .edit

我尝试执行以下操作:

iSrc   = paths[i]

但这显然不起作用，并且添加了错误的类:)

我还有另一个关于我的脚本的问题，但我会作为一个单独的问题来问。谢谢!

编辑:

再次感谢所有在这里帮助过我的人。我现在在我的代码中添加了一个额外的位，它也将设置图像标题，并认为我将其发布在这里，它可能会对将来的某人有所帮助。

有些图像有标题，有些则不喜欢它们包裹在 anchor 中。所以我做了以下似乎对我有用的事情:

var paths = ["add","clear","copy","delete"];

var fullPaths;
        var imgs;   
        for(var p=0; p<paths.length; p++) {    
            fullPaths = "img[src*='" + paths[p] + "']";
            imgs = document.querySelectorAll(fullPaths);
            for (var i = 0; i < imgs.length; i++) {
                var img    = imgs[i];
                    if ($(img).attr('title')) {
                        iTitle = img.title;
                    } else {
                        iTitle = img.parentNode.title;
                    }

                    iClass = img.className;
                    iSrc   = paths[p];
                    span   = $('<span />', {'class': 'iconfont '+iClass+' '+iSrc,
                                            title  : iTitle
                             });
                $(img).replaceWith(span);
            }
        }   

Answer 1

这与 @bfavaretto 建议的方法相同，但使用了 jQuery 循环并进行了一些简化:

var paths = ["add", "clear", "copy", "delete"];
$.each(paths, function (i, path) {
    $("img[src*='" + path + "']").each(function () {
        var $span = $('<span />', {
            class: 'iconfont ' + this.className + ' ' + path,
            title: this.parentNode.title
        });
        $(this).replaceWith($span);
    });
});