使用jQuery切换写入标签和移除标签

Question

大家早上好，我想为phpbb论坛创建一点js代码，我想创建一个按钮，当它点击create code [media][/media]时问题是，我不能做切换，当按钮点击后必须创建[media][/media]当再次点击delete [media][/media]我的代码时：

​

var textForMedia = "Input your media link";
$('a').click(function() //this will apply to all anchor tags
{ 
   $( ".inner" ).wrapInner( "[media]" + textForMedia + "[/media]");
});

a {
  display: block;
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<form action="">
  <a href="#">Input video</a>
  <textarea style="width:300px;height:200px" placeholder="Media" class="inner"></textarea>
</form>

​

另外，数组textForMedia如何像这样消失$(textForMedia).fadeToggle('slow', 'linear');呢？

另外，我的英语很抱歉。)

Answer 1

你可以像下面这样做很多事情中的一个。

单击a可以将filled类添加到textarea中。在click上，再次检查filled类并执行toggle行为。

​

var textForMedia = "Input your media link";
$('a').click(function() //this will apply to all anchor tags
  {
    if( $(".inner").hasClass("filled"))
    {
      $(".inner").empty();
      $(".inner").removeClass("filled");
    }
     else{
       $(".inner").text("[media]" + textForMedia + "[/media]");
      $(".inner").addClass("filled");
    }
  });

a {
  display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="">
  <a href="#">Input video</a>
  <textarea style="width:300px;height:200px" placeholder="Media" class="inner"></textarea>
</form>

​