添加图像到textarea onclick

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。但是，ID必须是独一无二的。你总是第一个因为

document.getElementById('images_available'); 

总是会得到你的第一个元素与此ID，因为它不希望在DOM任何其他人。

您应该能够通过只使用this代替someimage解决这个问题：“ $图像[‘名称’]”

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