Question

我正在尝试创建一个按钮，在单击时将font-weight更改为粗体，然后在单击时再次恢复正常。但困难的是，我只希望他们点击粗体按钮的文本区域部分加粗，所以我不希望所有文本区域都是粗体。我试着制作它的所有文本区域一开始都是大胆的，但它不会起作用。我相信这可能很容易，但我无法弄明白。我会把我的代码放在下面，谢谢你的时间。

<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属性感兴趣的内容。（它不能在textarea内完成）

$("[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>

单击时在文本区域中切换font-weight的按钮

1 个答案: