将图片添加到textarea onclick [英] Add image to textarea onclick

问题描述

我试图将单击的每个不同图像添加到文本区域，但是我只能添加第一个图像.

I am trying to add each different image I click on into the textarea, but I can only get the first image to add.

只需添加，我正在使用猫头鹰传送带.因此，这是html的样子:

Just to add I am using Owl Carousel. So here is what the html looks like:

<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会针对显示的每个图像重复显示.

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

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

Here is what I got so far:

$('.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);
        }
});

推荐答案

如果

上面的HTML会针对显示的每个图像重复显示.

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

是完全正确的，您将在DOM中多次获得ID images_available. ID必须是唯一的.您总是会得到第一个，因为

is completely true, you will have the id images_available in your DOM multiple times. Ids have to be unique though. You always get the first one because

document.getElementById('images_available');

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

will always get you the first element with this id since it doesn't expect any others in the DOM.

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

You should be able to fix this by just using this instead of someimage:

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

这篇关于将图片添加到textarea onclick的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！