Question

I have a button with text in it. When clicking this button it will be disabled (not clickable) after 3 clicks. Also the button text must changes at each click.

See my example (press render to see it work):
http://jsbin.com/univu3/edit#source

Now I want this same functionality but then with a DIV. This is my javascript code I have cooked up so far:

//Hint
function hint() {
var count = 3

if(count==0) {
        $(this).addClass('disabled');
    };

My div:

<div class="ht">HINT (3)</div>

So after 3 clicks the (3) must be (0) and the class “disabled” must be loaded (making the div look like it is disabled.

Any ideas how tp pull this off?

Thank you for your time

ps I use jQuery too

Answer 1

Nice and short.[updated]

$('.ht').click(function(){
    var $this = $(this);
    var pos = parseInt($this.text().match(/\d+/g)[0]) //use regex to pull the number out;

    if(!pos) return false;

    $this.text($this.text().replace(pos, --pos))

    if(!pos){
        $this.addClass('disabled');
    }
})

http://jsfiddle.net/brentmn/MsQMs/1/