根据论坛中的给定值添加各种图片

Question

我有两张 png 图片，我想在图片的顶部添加 ，具体取决于在特定配置文件上应用的特定设置。我找到了一个可以帮助我的不错的教程，它在这里：http://fmdesign.forumotion.com/t279-profile-field-for-custom-post-profiles

现在，它只说明如何为某个图片添加边框、背景和文本颜色。我在 Stackoverflow 上找到了另一篇文章，但我不知道如何更改它以满足我的需要。线程在这里：Insert image object into HTML

现在，我想要使用的代码看起来像这样（我的浏览器不会为我抛出任何错误，但它仍然可能包含不适当的编码和错误，我是脚本新手，请耐心等待）：

var delikeret = document.getElementById("dkepkeret");
var eszakikeret = document.getElementById("ekepkeret");

function extraProfileImage() {
    var field = 'Hovatartozás';

    customProfile
        ({
            value: 'Észak',
            keret: eszakikeret,
        });

    customProfile
        ({
            value: 'Dél',
            keret: delikeret,
        });

customProfile({ value: '.*?', remove: True }); // remove field from profiles
function customProfile(o) {
                var reg = new RegExp('<span class="label"><span style="color:#[a-f0-9]{6};">'+field+'</span>\\s:\\s</span>(\\s|)'+o.value+'<br>','i');

    for (var i = 0, p = $('.postprofile, .user, .postdetails.poster-profile'); i < p.length; i++) {
        if (p[i].innerHTML.match(reg)) {
            if (o.remove) p[i].innerHTML = p[i].innerHTML.replace(reg, '');
        } else {
          p[i].style.backgroundImage: "url('" + o.keret + "')";
            //p[i].appendChild(o.keret);
            //p[i].style.background = o.keret;
            //p[i].style.backgroundPosition = "center center";
            //p[i].id = getElementById("o.keret");
        }
    }
}
}

var info = 'Plugin developed by Ange Tuteur for customizing post profiles. For help with this plugin, please see the following link : http://fmdesign.forumotion.com/t279-profile-field-for-custom-post-profiles';

$(document).ready(function() {
    extraProfileImage();
});

我很乐意得到任何帮助！ PS：其他的我都按照Forumotion教程做了，虽然带有“dkepkeret”和“ekepkeret”的图片存储在页面的其他地方，会不会有问题？

提前致谢！

Answer 1

所以我的代码以某种方式工作，这就是它现在的样子：

var delikeret = new Image();

var eszakikeret = new Image();

delikeret.src = 'http://p.coldline.hu/2018/01/22/2748437-20180122-B8YiFj.png'; eszakikeret.src = 'http://p.coldline.hu/2018/01/22/2748438-20180122-9sWitv.png';

function extraProfileImage() {
    var field = 'Hovatartozás';

    customProfile
        ({
            value: 'Észak',
        });

    customProfile
        ({
            value: 'Dél',
        });

// customProfile({ value: '.*?', remove: True }); // 从配置文件中删除字段 功能 customProfile(o) { var reg = new RegExp(''+field+'\s:\s(\s|)'+o.value+'
','i');

    for (var i = 0, p = $('.postprofile, .user, .postdetails.poster-profile'); i < p.length; i++) {
        if (p[i].innerHTML.match(reg)) {
            if (o.remove) p[i].innerHTML = p[i].innerHTML.replace(reg, '');
        } else {
          if (o.value == "Észak") {
            p[i].append(eszakikeret);
          } else if (o.value == "Dél") {
            p[i].append(delikeret);
          }
        }
    }
}
}

但如果我更改给定配置文件的值，它不会附加图像。如何解决？

Answer 2

所以我终于可以让我的代码没有错误了，这就是它的样子。

function extraProfileImage() {
    var field = 'Hovatartozás';

    customProfile
        ({
            value: 'Észak',
        });

    customProfile
        ({
            value: 'Dél',
        });

//customProfile({ value: '.*?', remove: true }); // remove field from profiles
function customProfile(o) {
                var reg = new RegExp('<span class="label"><span style="color:#[a-f0-9]{6};">'+field+'</span>\\s:\\s</span>(\\s|)'+o.value+'<br>','i');

    for (var i = 0, p = $('.postprofile, .user, .postdetails.poster-profile'); i < p.length; i++) {
        if (p[i].innerHTML.match(reg)) {
            if (o.remove) p[i].innerHTML = p[i].innerHTML.replace(reg, '');
        } else {
          if (o.value == "Észak") {
            p[i].classList.add("eszakikeret");
          } else if (o.value == "Dél") {
            p[i].classList.add("delikeret");
          }
        }
    }
}
}

var info = 'Plugin developed by Ange Tuteur for customizing post profiles. For help with this plugin, please see the following link : http://fmdesign.forumotion.com/t279-profile-field-for-custom-post-profiles';

$(document).ready(function() {
    extraProfileImage();
});

我必须将 .postprofile 的宽度设置为 210 像素，这样边框图像就不会徒劳无功。

添加到我的 CSS 的代码如下：

/* custom profile default*/ .postprofile, .user, .postdetails.poster-profile {
position: relative;
border:1px solid transparent;
padding:3px;
margin:3px;
z-index: 1;
}
/* ipb fix */ #ipbwrapper .postprofile {margin:0;
position: absolute;
top: 0;
left: 0;
}
.delikeret{
border-image-source: url(http://p.coldline.hu/2018/01/22/2748438-20180122-9sWitv.png);
border-image-slice: 20%;
border-image-outset: 10px;
border-image-width: 60px;
border-image-repeat: round;
}
.eszakikeret{ 
border-image-source: url(http://p.coldline.hu/2018/01/22/2748437-20180122-B8YiFj.png);
border-image-slice: 20%;
border-image-outset: 10px;
border-image-width: 60px;
border-image-repeat: round;
}

所以我做到了。如果有人会表现出未来的兴趣。