jquery larger font size on click

i am trying to make the font size larger on everyclick but it only does it once here is my code .

<a href="5">add</a>
<script type="text/javascript">
$('a').liv开发者_运维技巧e('click', function(e){
e.preventDefault();

    var link = $(this).attr('href');

        var num = link+20;

        var font = {color:"#993300", fontSize:num+"px"};

        $("p").css(font);

        return false;

});
</script>

Any help ???

You have to set the value back to the href to work again. Here is the code (not tested)

<a href="5">add</a>
<script type="text/javascript">
$('a').live('click', function(e){
e.preventDefault();

    var link = $(this).attr('href');

        var num = link+20;
        $(this).attr('href', num)

        var font = {color:"#993300", fontSize:num+"px"};

        $("p").css(font);

        return false;

});
</script>

You forgot to put back the new num into the href:

Add this line:

$(this).attr('href', num);

The reason is you're updating your fontSize to the href's value + a set value. Where you should be using the current fontSize. The code would become this:

<a href="5">add 5</a>
<a href="10">add 10</a>
<script type="text/javascript">
$('a').live('click', function(e) {
  e.preventDefault(); // Prevent our default method

  var oldSize = $("p").css('fontSize'); // Get the current fontsize
  var increment = $(this).attr('href'); // Get the amount we want to increment
  var newSize = oldSize + increment; // Calculate the new size

  var newCss = {color: "#993300", fontSize: newSize+"px"}; // Format our CSS
  $("p").css(newCss); // Apply it

  return false;
});
// Or for short:
$('a').live('click', function (e) {
  e.preventDefault();
  $("p").css{color: "#993300", fontSize: ($("p").css('fontSize') + $(this).attr('href')) + "px"});
});
</script>