添加和删​​除元素以具有切换效果

Question

我有这个问题：在随后点击粗体作者姓名时，删除添加的元素（从而在粗体和普通文本之间切换）。我对这个问题的解决方案如下：

$('#f-author').click(function(){
    if($(this).parent('b').length == 0){
         $(this).wrapAll('<b></b>');
    } else {
        $(this).unwrap();
    }
});

我想知道这是否是问题的最佳解决方案？它按照我期望的方式工作，当你继续点击名字时，在粗体和非粗体之间切换。

Answer 1

鉴于问题的措辞，是的，这看起来很好。在实践中，你更有可能这样做：

$('#f-author').click(function() {
    $(this).toggleClass('bold'); //assuming a css style exists of 
                                 //.bold { font-weight: bold; }
});

或

$('#f-author').click(function() {
    var fontWeight = $(this).css('font-weight');
    fontWeight = (fontWeight === 'bold' ? 'normal' : 'bold');
    $(this).css('font-weight', fontWeight);
});