javascript - 添加到文本区域时重复 html？

Question

我有这个小js，它在点击时将div及其内容添加为文本区域中的纯文本:

  var content = " ";
  jQuery('body').on('click', '.btn_video', function() {
    if(jQuery(this).text()=="ADD") {
      jQuery(this).text("REMOVE");
      jQuery(this).parents(".thumbnail").parent().addClass('selected');
    } else{
      jQuery(this).text("ADD");
      jQuery(this).parents(".thumbnail").parent().removeClass('selected');
    }
    jQuery('.selected').each(function(){
      content += jQuery(this).prop('outerHTML');
    });
    jQuery('#usp-custom-5').val(content);
  });

这是点击时添加的 html

<div class="col-xs-12 col-md-4">
    <div class="thumbnail">
        <div class="embed-responsive embed-responsive-16by9">
            <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/'+e.id+'?rel=0&modestbranding=1" frameborder="0" allowfullscreen></iframe>
        </div>
        <div class="caption">
            <p>Duration: <span class="video-time">'+YTDurationToSeconds(e.contentDetails.duration)+'</span></p>
            <button type="button" class="btn btn-danger btn-block btn_video"><strong>ADD</strong></button>
        </div>
    </div>
</div>

<div class="col-xs-12 col-md-4">
    <div class="thumbnail">
        <div class="embed-responsive embed-responsive-16by9">
            <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/'+e.id+'?rel=0&modestbranding=1" frameborder="0" allowfullscreen></iframe>
        </div>
        <div class="caption">
            <p>Duration: <span class="video-time">'+YTDurationToSeconds(e.contentDetails.duration)+'</span></p>
            <button type="button" class="btn btn-danger btn-block btn_video"><strong>ADD</strong></button>
        </div>
    </div>
</div>

   <textarea id="usp-custom-5"></textarea>

我希望能够在单击按钮时添加每个 html 内容而不包含重复的内容，并且还能够在用户单击按钮时删除单个内容。

如下jsfiddle如果我单击“添加”按钮，我会收到重复的内容

Answer 1

在点击函数的开头添加 var content = '';。

https://jsfiddle.net/q5070aa4/5/

之前发生的情况是，您获取任何存在的内容并添加“选定”的任何元素文本 - 这将产生重复的数据。您想要在单击时清除文本区域，以便仅显示 "selected" 元素文本