[Solved] Jquery code reduction Help me reduce this a little?

[noahgelman]

This is simple. A button makes all 4 divs hidden, and the makes the div that relates to the button show. Basically, it switches out content. Here is what I have:

Code:

$(document).ready(function() {
$(‘a#tops’).click(function() {
$(‘div#slider-content div’).removeClass().addClass(‘hide’);
$(‘div#clothes-slider-1’).removeClass().addClass(‘show’);
});
$(‘a#bottoms’).click(function() {
$(‘div#slider-content div’).removeClass().addClass(‘hide’);
$(‘div#clothes-slider-2’).removeClass().addClass(‘show’);
});
$(‘a#dresses’).click(function() {
$(‘div#slider-content div’).removeClass().addClass(‘hide’);
$(‘div#clothes-slider-3’).removeClass().addClass(‘show’);
});
$(‘a#outerwear’).click(function() {
$(‘div#slider-content div’).removeClass().addClass(‘hide’);
$(‘div#clothes-slider-4’).removeClass().addClass(‘show’);
});
});

I KNOW this can be reduced though. Here is something else that I tried but it didn’t work.

Code:

$(document).ready(function() {
$(‘div#slider-links a’).click(function() {
$(‘div#slider-content div’).removeClass().addClass(‘hide’);
switch (this.id) {
case ‘tops’:
$(‘div#clothes-slider-1’).removeClass().addClass(‘show’);
break;
case ‘bottoms’:
$(‘div#clothes-slider-2’).removeClass().addClass(‘show’);
break;
case ‘dresses’:
$(‘div#clothes-slider-3’).removeClass().addClass(‘show’);
break;
case ‘outerwear’:
$(‘div#clothes-slider-4’).removeClass().addClass(‘show’);
break;
});
});

[FSX]

Maybe you can put it in an array and the loop through the array.

[noahgelman]

I’m still new to jquery and don’t know how to do that.

[Chris Coyier]

I think the answer is going to lay in giving each of the elements you are attaching click handlers to a common class name. Then maybe on each of those anchor links, put a rel attribute like <a id="bottoms" rel="1">…</a> Then use that rel value inside the selector for the second statement.

Code:

$(document).ready(function() {
$(‘a.new-common-class-name’).click(function() {
$(‘div#slider-content div’).removeClass().addClass(‘hide’);
$(‘div#clothes-slider-‘ + $(this).attr(rel)).removeClass().addClass(‘show’);
});
});

[noahgelman]

Thanks for all the help posted, especially you Chris. I’m sure you’re really busy. By the way, thank you for all the help this site has given me.

Sorry for not explaining it properly in my first post. I just realized i misworded it. I meant to say that there are 4 buttons, each when clicked, shows the div of content it corresponds to, and the hiding the other 3. It was supposed to be so a viewer can click a category of clothes and see an image of it.

Anyways, to the solution. Here is what I narrowed it down to.

Code:

$(document).ready(function() {
$(‘#slider-content div:eq(0)’).siblings().hide();
$(‘#slider-links li a’).click(function() {
$(‘#slider-content div’).hide();
});
$(‘a#tops’).click(function() {
$(‘#clothes-slider-1’).show();
});
$(‘a#bottoms’).click(function() {
$(‘div#clothes-slider-2’).show();
});
$(‘a#dresses’).click(function() {
$(‘div#clothes-slider-3’).show();
});
$(‘a#outerwear’).click(function() {
$(‘div#clothes-slider-4’).show();
});
});

The $(‘#slider-content div:eq(0)’).siblings().hide(); switches divs 2 through 4 so hidden by default.

The next 2 lines make it so whenever one of the buttons is clicked, all the divs are hidden.

And the rest will show the corresponding div when a button is clicked. The user can now click any of the buttons and go back and forth as much as they want, no hassle. Also, it’s a lot less code than there was initially and I don’t have to create any classes.

[Author]

Posts