Question

I wrote jquery function for emphasis clicked <h4> tag. but it only works an one time. so how I solve that problem. this is my code.

   $(document).ready(function(){
        $('h4').click(function(){
            var a = $('h4').attr('style');
            if(a=='font-size: 1.5em'){
                $(this).css('font-size','2.5em');
            }
            else{
                $(this).css('font-size','1.5em');
            }
        });
    });  

Answer 1

If you throw a simple console.log(a) into the mix you’ll see the problem. When you do this:

$(this).css('font-size', '1.5em');

you end up setting the style attribute to font-size: 1.5em;, take note of the semicolon. So your equality test fails once you’ve toggled back to 1.5em. I wouldn’t depend on any particular format in the style attribute, there might be different numbers of spaces (possibly none) than you’re expecting, there could be semicolons where you don’t expect them, …

You’re better off doing this using a CSS class. The HTML would look like this:

​<h4>Header</h4>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

and the CSS something like this:

​h4 {
    font-size: 1.5em;
}
h4.emphasized {
    font-size: 2.5em;
}​

and finally, your JavaScript would be something nice a simple like this:

$('h4').click(function() {
    $(this).toggleClass('emphasized');
});

Demo: http://jsfiddle.net/ambiguous/2rpxa/

​