Question

我目前正在通过Packtpub学习jQuery第4版，尝试其中一个关于DOM操作的练习。

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

这是我到目前为止所提出的。

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条件

如果（$（本）。儿童（）具有（＆＃39; B＆＃39;））

但似乎没有任何效果。

我很感激有人指出我的错误。

谢谢！

Answer 1

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

Css课程：

.bolder{
    font-weight:Bold;
}

代码：

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

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

Answer 2

如果没有所请求的类或CSS，则会添加并删除<b>标记

$(document).ready(function () {
    $('#f-author').on('click', function () {
        if ($('b', this).length) {
            $( $('b', this).get(0).childNodes[0] ).unwrap();
        } else {
            $(this).wrapInner('<b></b>');
        }
    });
});

FIDDLE

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

2 个答案: