Question

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

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

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

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}）; //从个人资料中删除字段 function 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

所以我最终可以让我的代码没有bug，这就是它的外观。

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宽度设置为210px，这样边框图像就不会伸展。

添加到我的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;
}

所以我做到了。如果有人愿意展示未来的兴趣。

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

2 个答案: