Javascript将html转换为bbcode，用于带有链接的图像

我有一个用php制作的图像库。我制作了一个小php脚本，用我最新上传的图片生成代码，一个缩略图列表，其结构如下（如果需要，我可以更改结构）：

并在图片周围加上一个小边框（让我看到我已经点击了那个图片）

---

谢谢

您好，使用jquery，您可以使用点击功能

$('body').on('click', 'img.bbcode', function() {
var imgsrc = $(this).attr('src');
$('.message').append('[url=' + imgsrc + '][img]' + imgsrc + '[/img][/url]');
$(this).css('border', '1px solid #000');
});

希望对您有所帮助

这里是纯JS：

var imgs = document.getElementsByClassName("bbcode");
var textArea = document.getElementsByClassName("message")[0];
var length = imgs.length;

for ( i = 0; i < length; i++ ) {
    var element = imgs[i];

  element.addEventListener("click", function(){
    var imgSrc = element.src;
    textArea.value += "[url=" + imgSrc + "][img]" + imgSrc + "[/img][/url]";
  });
}

var-imgs=document.getElementsByClassName（“bbcode”）；
var textArea=document.getElementsByClassName（“消息”）[0]；
变量长度=imgs.length；
对于（i=0；iA/WebAdvices我在阅读了一些文档和一些例子之后才亲自动手编写代码，代码和你的非常相似，所以我会考虑你的回答作为答案。我从来没有想到它这么简单（我只使用新的php和html语言），所以我请求帮助。我正在考虑添加一些保护，以避免为已单击allready的图像生成两次代码。我可能必须使用.attr或.html来检查图像是否有边框？如果没有边框，则在textarea中插入bbcode。你能帮忙吗？
$('body').on('click', 'img.bbcode', function() {
var imgsrc = $(this).attr('src');
$('.message').append('[url=' + imgsrc + '][img]' + imgsrc + '[/img][/url]');
$(this).css('border', '1px solid #000');
});

var imgs = document.getElementsByClassName("bbcode");
var textArea = document.getElementsByClassName("message")[0];
var length = imgs.length;

for ( i = 0; i < length; i++ ) {
    var element = imgs[i];

  element.addEventListener("click", function(){
    var imgSrc = element.src;
    textArea.value += "[url=" + imgSrc + "][img]" + imgSrc + "[/img][/url]";
  });
}