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"的任何元素文本 - 这将产生您的重复数据。您希望在点击时清除textarea，以便只显示"selected"元素文本

Answer 2

试试这个：您可以将删除选定的类添加到div并使用所选类读取所有div以获取内容并将其替换为文本区域

jQuery(function(){
    jQuery(".btn.btn-danger.btn-block").on("click", function(){
        var text = $(this).text();
      if(text=="ADD") {
        jQuery(this).find("strong").text("REMOVE");
        jQuery(this).closest(".col-xs-12.col-md-4").addClass("selected");
      } else if(text == "REMOVE") {
       jQuery(this).find("strong").text("ADD");
       jQuery(this).closest(".col-xs-12.col-md-4").removeClass("selected");
      }
      var content = "";
      jQuery(".col-xs-12.col-md-4.selected").each(function(){
            content += '<div class="col-xs-12 col-md-4">' + $(this).html() + '</div>';
      });
      jQuery('#usp-custom-5').val(content);
  });
});

<强> JSFiddle Demo

添加到textarea时重复html？

2 个答案: