如何將一系列點擊元素附加到textarea？

我有一組元素，當我點擊我想插入它的HTML到textarea。如何將一系列點擊元素附加到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); 
      }); 
     });

來源

2017-04-16 Roberto Marras

如果你想在僅加入該項目從textarea的移除，留下在那裏休息，請提供一個可測試的例子 –

，這將需要一個因爲代碼需要找出未選中的複選框所添加的內容，並從textarea中只刪除該字符串，所以需要做更多的工作。 – alfredo

@alfredo我正在推入已經點擊過的數組中。我相信我將不得不做的是加入2陣列，因爲我必須將功能推向2個不同的陣列，然後添加 –

您在代碼中犯了個小錯誤：

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

應該成爲

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

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

來源

2017-04-16 03:45:08 Digelim

好的，但我確實得到相同的點，就好像我只是在做'jQuery（'＃usp-custom-4'）。val（str）; '的事情是，當我啓動第二個功能，我點擊一個圖像時，textarea刪除先前的功能添加圖像 –

我想知道如果我應該設置爲全球外的所有功能'str ='';' –

只是嘗試，當我點擊一個圖像，而不是隻添加一個，它增加了許多重複的 –

如何將一系列點擊元素附加到textarea？

回答

相關問題