CODEWITHSUNDEEP
jquery
Willem
Willem

Reputation: 123

Add and remove an element to have a toggle effect

I have this question: On a subsequent click of the bolded author's name, remove the element that was added (thereby toggling between bold and normal text). My solution to this question is as follows:

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

I want to know if this would be the best solution to the problem? It works the way I expect it to work, toggles between being bold and not bold when you keep on clicking on the name.

Upvotes: 0

Views: 30

Answers (1)

dave
dave

Reputation: 64667

Given the wording of the question, yes, that seems fine. In practice, you would more likely be doing:

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

or

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

Upvotes: 2

Related Questions