如何将一系列点击元素附加到textarea？

Question

我有一组元素，当我点击我想插入它的HTML到textarea。

如果我这样做，我得到了很多的元素不只是签一个：

jQuery('body').on('change', '.masonry .item :checkbox', function() { 
    var urls = []; 
    jQuery('.masonry .item :checkbox:checked').each(function() { 
     urls.push(jQuery(this).next('label').find('img').attr('src')); 
    }); 
    var str = ''; 
    urls.forEach(function (url) { 
     str += '<div class="item"><img onerror="this.parentNode.removeChild(this);" src="' + url + '"></div>'; 
    }); 
    jQuery('#usp-custom-4').val(function(_, val){ 
     return val + str; 
    }); 
}); 

如果我这样做，我得到没有任何文字到文字区域：

jQuery('#usp-custom-4').append(str); 

而且如果我做这工作得很好：

jQuery('#usp-custom-4').val(str); 

但随着最后一个问题是，我有2个不同的功能与2组不同的的元素，当我点击第一组时，它是好的，但如果我点击第二组，它会删除我插入的值，通过选择第一组并插入第二组。这两个集合必须插入他们选定的HTML到相同的文本区<textarea id="usp-custom-4"></textarea>

一个样本jsFiddle playground，在这里它增加，但是当我取消它不会删除。

UPDATE

全球阵列var urls = [];

功能1：

function (data) { 
    jQuery.each(data.items, function(i, item) { 
     var uniq = uniqueId('thing_'); 
     var $items = jQuery('<div class="item">'.concat(
     '<input type="checkbox" name="', uniq, '" value="valuable" id="', uniq, '" />', 
     '<label for="', uniq, '">', 
      '<img class="img-responsive" src="' + item.link + '">', 
     '</label>', 
    '</div>')); 
     jQuery(".masonry").append($items); 
     jQuery('body').on('change', '.masonry .item :checkbox', function() { 
     jQuery('.masonry .item :checkbox:checked').each(function() { 
      urls.push(jQuery(this).next('label').find('img').attr('src')); 
     }); 
     var str = ''; 
     urls.forEach(function (url) { 
      str += '<div class="item"><img onerror="this.parentNode.removeChild(this);" src="' + url + '"></div>'; 
     }); 
     jQuery('#usp-custom-4').val(str); 
     }); 
    }); 
    }); 

功能2

function (data) { 
     jQuery.each(data.items, function(i, item) { 
      var uniq = uniqueId('thing_'); 
      var $items = jQuery('<div class="item">'.concat(
      '<input type="checkbox" name="', uniq, '" value="valuable" id="', uniq, '" />', 
      '<label for="', uniq, '">', 
       '<img class="img-responsive" src="' + item.link + '">', 
      '</label>', 
     '</div>')); 
      jQuery(".masonryB").append($items); 
      jQuery('body').on('change', '.masonryB :checkbox', function() { 
      jQuery('.masonryB :checkbox:checked').each(function() { 
       urls.push(jQuery(this).next('label').find('img').attr('src')); 
      }); 
      console.log(urls) 
      var str = ''; 
      urls.forEach(function (url) { 
       str += '<div class="item"><img onerror="this.parentNode.removeChild(this);" src="' + url + '"></div>'; 
      }); 
      jQuery('#usp-custom-4').val(str); 
      }); 
     }); 

Answer 1

您在代码中犯了个小错误：

jQuery('#usp-custom-4').val(function(_, val){ 
    return val + str; 
}); 

应该成为

jQuery('#usp-custom-4').val(function(_, val){ 
    return str; 
}); 

https://jsfiddle.net/digelim/w9vbtw8q/