添加圖像到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];