Question

当我点击ADD按钮时，它应该将所有html添加到textarea中，并且工作正常。但是，如果我再次单击，我应该从文本区域中删除它。一个想法可能是将插入的html推入数组？

$('body').on('click', '.btn_video', function() {
  var $imageSelected = $(this).parent().parent().parent().prop('outerHTML');
  $('#usp-custom-5').val(function(_, currentValue) {
    return currentValue + $imageSelected
  });
});

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="container">
  <div class="row">
     <div class="col-xs-12 col-md-6">
      <div class="thumbnail">
        <div class="embed-responsive embed-responsive-16by9">
          <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/3fJjajItnEQ?rel=0&amp;modestbranding=1" frameborder="0" allowfullscreen=""></iframe></div><div class="caption">
          <p>Duration: <span class="video-time">31:54</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-6">
      <div class="thumbnail">
        <div class="embed-responsive embed-responsive-16by9">
          <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/3fJjajItnEQ?rel=0&amp;modestbranding=1" frameborder="0" allowfullscreen=""></iframe></div><div class="caption">
          <p>Duration: <span class="video-time">31:54</span></p>
          <button type="button" class="btn btn-danger btn-block btn_video"><strong>ADD</strong></button>
        </div>
      </div>
    </div>
  </div>
</div>

<textarea name="usp-custom-5" id="usp-custom-5" data-required="false" placeholder="Example Input 5" data-richtext="false" class="usp-input usp-textarea usp-form-16" rows="5" cols="30" style="margin: 0px; height: 266px; width: 996px;"></textarea>

Here it is a Fiddle

$('body').on('click', '.btn_video', function() {
  var $imageSelected = $(this).parent().parent().parent().prop('outerHTML');
  $('#usp-custom-5').val(function(_, currentValue) {
    return currentValue + $imageSelected
  });
});

Answer 1

看看它是否是你需要的：

return $imageSelected

取代：

var arr = [];
    $('body').on('click', '.btn_video', function() {
      var $imageSelected = $(this).parent().parent().parent().prop('outerHTML');
      $('#usp-custom-5').val(function(_, currentValue) {
        arr.push($imageSelected);
        return $imageSelected
      });
    });

如果您需要在删除之前保存信息，请粘贴一个数组：

{{1}}

Answer 2

<强> Updated fiddle

您可以为此使用帮助程序类selected，然后单击添加/删除它：

$('body').on('click', '.btn_video', function() {
  var content = "";

  if($(this).text()=="ADD")
  {
    $(this).text("REMOVE");
    $(this).parents(".thumbnail").parent().addClass('selected');
  }else{
    $(this).text("ADD");
    $(this).parents(".thumbnail").parent().removeClass('selected');
  }

  $('.selected').each(function(){
    content += $(this).prop('outerHTML');
  });

  $('#usp-custom-5').val(content);
});

希望这有帮助。

在将html添加到textarea时如何切换添加/删除？

2 个答案: