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; 
    });
});

如果我这样做，我在textarea中根本没有任何文字：

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

如果我这样做可以正常工作：

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

但是最后一个的问题是我有2个不同的函数和2个不同的元素集，当我点击第一个集合时它很好但是如果我点击第二个集合它会删除我通过选择插入的值第一组，它只插入第二组。两个集都必须将他们选择的html插入到同一个textarea <textarea id="usp-custom-4"></textarea>

中

示例jsFiddle playground，此处添加，但是当我取消选中时，它不会删除。

更新

全局数组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/

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

1 个答案: