Question

I am trying to add a class and remove the on click event for a link when it is clicked and then undo this when another link is clicked, I have an example here http://jsfiddle.net/bdjohnson/zXyb9/4/

But after a few clicks it dies, I output the index to the console and it kept changing, is this the wrong way to do it?

Any help is greatly appreciated.

Answer 1

First of all, you do not need any each loop to attach a click handler.
Just use click on a jQuery object will attach event handler to any element of the collection.

Then you can write code way more simple:

$(function() {
    var previews = $("#pic div"); // Caching selector
    previews.hide();

    $("a.pic_link").click(function(event) {
        var $this = $(this);
        if (!$this.hasClass("active")) {
            previews.slideUp(300).delay(300).eq($this.index()).slideDown(300);
            $this.addClass("active");
            $this.siblings().removeClass("active");
        }
    });
});​

Note that you should use complete callback instead of using delay, like this:

previews.slideUp(300, function() {
   previews.eq($this.index()).slideDown(300);
});