javascript - 单击时将图像添加到文本区域

Question

我试图将我点击的每个不同图像添加到文本区域中，但我只能获取要添加的第一个图像。

补充一下，我正在使用 Owl Carousel 。 html 如下所示:

<div class="item link" id="images_available">
    <img src="https://s3.amazonaws.com/msluploads/'.$image['name'].'" class="img-responsive img-post"/>
    <div class="after">                                                                     
        <span class="zoom">
            <i class="fa fa-check text-success"></i>
        </span>
    </div></div>

对于显示的每个图像，上面的 HTML 都会重复。

这是我到目前为止得到的:

$('.link').on('click', function(event){
        var $this = $(this);
        var someimage = document.getElementById('images_available');
        var myimg = someimage.getElementsByTagName('img')[0];
        var mysrc = myimg.src;
        if($this.hasClass('clicked')){
            $this.removeAttr('style').removeClass('clicked');                 
        } else {
            $this.addClass('clicked');
            tinyMCE.get('post_imagetxt').setContent(mysrc);
        }
});

Answer 1

如果

The HTML above gets duplicated for every image that is displayed.

完全正确，您的 DOM 中会多次出现 id images_available 。但 ID 必须是唯一的。你总是得到第一个，因为

document.getElementById('images_available');

将始终为您提供具有此 id 的第一个元素，因为它不需要 DOM 中的任何其他元素。

您应该能够通过使用 this 而不是 someimage 来解决此问题:

var myimg = this.getElementsByTagName('img')[0];