Question

我正在尝试将我点击的每个不同图像添加到textarea中，但我只能添加第一个图像。

添加我正在使用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

如果

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

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

document.getElementById('images_available');

将始终为您提供具有此ID的第一个元素，因为它不会期望DOM中的任何其他元素。

您应该只需使用this代替someimage即可解决此问题：

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

将图片添加到textarea onclick

1 个答案: