0

在这里道歉是关于我的 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]

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

关于我的剧本，我还有另一个问题，但我会作为一个单独的问题提出。谢谢！

编辑：

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

有些图像有标题，有些图像不喜欢用锚包裹起来。所以我做了以下似乎对我有用的事情：

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

3 回答 3

3

这与@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);
    });
});
于 2013-09-09T21:10:29.920 回答
2

您可以为每个路径/类分别获取图像，因此它们不会混合：

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],
            iClass = img.className,
            iSrc   = paths[p],
            span   = $('<span />', {'class': 'iconfont '+iClass+' '+iSrc,
                                    title  : img.parentNode.title
                     });
        $(img).replaceWith(span);
    }
}
于 2013-09-09T20:58:19.340 回答
1

我喜欢 bfavaretto 的回答，但如果您不想单独获取图像，您可以随时添加这个蹩脚的解决方法：

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;
        //workaround start
        var iSrc;
        for(var j = 0; j < paths.length; j++) {
            if(img.src.split('/').pop().indexOf(paths[i]) != -1) {
                iSrc = paths[i];
                break;
            }
        }
        //workaround end
        span   = $('<span />', {'class': 'iconfont '+iClass+' '+iSrc,
                                title  : img.parentNode.title
                 });

    $(img).replaceWith(span);
}
于 2013-09-09T21:03:28.593 回答