Combining sequential jQuery selectors into a single function

JavaScript
1

I’ve got perhaps a unique jQuery issue that I could use some help on.

I’ve got a function that looks like this…


	var openslide1 = function() {
		  $(".slide1").animate({
		    left: "+=250px",
		  }, 400, function() {
		    // Animation complete.
		  });
		  $('body').animate({
		    marginLeft: "+=250px",
		  }, 400, function() {
		    // Animation complete.
		  });
		  $(this).unbind('click', openslide1);
	};

	$(".openslide1").click(openslide1);

My issue is there could be a potentially unlimited number of slides, and therefore “openslides”. Each “openslide” selector corresponds with its own unique slide. (e.g. .openslide2 would open .slide2 and unbind .openslide2…so on and so forth).

So how do I combine these into a single variable and function?

And as a side note…I’m also going to want to “re-bind” the .openslide on the click of another event. Currently, I’m able to do them one at a time through this…


	$(".closeslide1").click(function() {
		$(".slide1").animate({
		    left: "-=250px",
		  }, 500, function() {
		    // Animation complete.
		  });
		  $('body').animate({
		    marginLeft: "-=250px",
		  }, 500, function() {
		    // Animation complete.
		  });

		$('.openslide1').click(openslide1);
	});

But once this becomes a combined function, I’m assuming “openslide1” will no longer be the variable for the function. So how would I rebind that click event when .closeslide is clicked. (And obviously I’m going to use the first part of this question to apply to the closeslide variables as well.)

PLEASE HELP!

Thanks!

2

Go to the jQuery selectors page. Do you see the attribute selectors? Such as the “Attribute Starts With Selector” one?

The event has access to the element that triggered it, so you can use a regular expression on the class name to get the numeric part of it, with for example: /closeslide(\d+)/