单击该按钮可在文本区域中切换字体粗细

Question

我试图制作一个按钮，将其单击时将字体粗细更改为粗体，然后将其单击时再次更改为普通字体。 但是困难的是，我只希望他们在加粗按钮上单击的文本区域中的部分被加粗，所以我不希望所有文本区域都被加粗。 我尝试过使所有文本区域起初都是粗体，但无法正常工作。 我敢肯定这可能真的很容易，但是我无法弄清楚。 我将代码放在下面，谢谢您的宝贵时间。

<button class="changeButton" id="bold"><strong>Bold</strong></button>
<textarea class="textdoc" name="textdoc"></div>

JavaScript：

$(document).ready(function(){
    $('#bold').click(function(){
        $('.textdoc').toggleClass('.boldClass');
    });
});

PS：这显然不是我的全部代码，如果您认为我需要发布所有代码，请评论告诉我，但是我认为可以使用此处提供的代码解决问题。

Answer 1

.toggleClass('.boldClass')应该没有. 就像.toggleClass('boldClass');

另外，您还缺少</textarea> （而不是</div> ）。
这是一个例子：

 $(document).ready(function(){ $('#bold').click(function(){ $('.textdoc').toggleClass('boldClass'); }); }); 

 .boldClass{ font-weight:bold; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button class="changeButton" id="bold"><strong>Bold</strong></button> <textarea class="textdoc" name="textdoc">TEST</textarea> 

如果您想单击B并能够以粗体字写出您对contenteditable属性感兴趣的contenteditable 。 （无法在文本区域内完成）

 $("[data-cmd]").click(function(evt){ evt.preventDefault(); var cmd = $(this).data().cmd; document.execCommand(cmd, false, null); }); 

 #editable{ border:1px solid #ddd; min-height:100px; padding:5px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <a data-cmd="bold" href="#"><b>B</b></a> <a data-cmd="italic" href="#"><i>I</i></a> <a data-cmd="underline" href="#"><u>U</u></a> <div id="editable" contenteditable="true">Write here<div>