写标签并删除与jQuery切换

Question

早上好， 我想为phpbb论坛创建一点点js代码，我想创建一个按钮，当它点击创建代码[media][/media]问题是，我不能做切换，当点击按钮的必须是创建[media][/media]后，当再次点击删除[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>

PS数组textForMedia如何消失$(textForMedia).fadeToggle('slow', 'linear');是这样的？

P.S.S.对不起，我的英语）

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>