一連のクリックした要素をテキストエリアに追加するにはどうすればよいですか？

Question

私は、クリックするとそのHTMLをテキストエリアに挿入したい要素のセットを持っています。

私はこれを行う場合、私はちょうどチェックし1の要素の多くを得る：

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番目のセットをクリックすると、最初のセットを選択して挿入した値が削除され、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/