0

ここでの謝罪は、私の JavaScript 画像置換スクリプトに関する別の質問です。これまでのところ、スタックエクスチェンジャーの助けを借りて、私はこれをこのように持っており、うまく機能しています。しかし今、私は別の小さな変更を加える必要があります:

    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 に答える