javascript - 使用 jQuery 在粗体文本和普通文本之间切换

Question

我目前正在学习 Packtpub 的《学习 jQuery 第 4 版》，尝试其中一项有关 DOM 操作的练习。

我试图通过单击来切换 div 粗体(通过添加元素而不是使用类或 css)，并通过后续单击删除粗体。(即在粗体和普通文本之间切换)。

这是我迄今为止想到的。

HTML

//more html
<div id="f-author">by Edwin A. Abbott</div> <-- the div to be bolded
//more html

我的 jQuery

$(document).ready(function(){
    $('#f-author').click(function(){

      if($(this).contents().has('b')){
        $('this').find('b').contents().unwrap();
      }else{
        $(this).wrapInner('<b>');
      }
    });
});

当我点击 div 时，我的代码中没有任何反应，并且我已经被困了几个小时，试图找出到底出了什么问题。我的猜测是问题出在 if 条件上。

我尝试用

替换 if 条件

if($(this).children().has('b'))

但似乎没有任何效果。

如果有人指出我的错误，我将不胜感激。

谢谢!

Answer 1

您可以简单地通过使用 toggleClass 切换添加粗体效果的特定类来处理它。

CSS 类:

.bolder{
    font-weight:Bold;
}

代码:

$(document).ready(function(){
    $('#f-author').click(function(){
        $(this).toggleClass('bolder')
    });
});

演示:http://jsfiddle.net/IrvinDominin/LdE6g/