Grow your CSS skills. Land your dream job.

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

  • # February 5, 2010 at 3:29 pm

    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
    # February 5, 2010 at 5:20 pm

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

    # February 5, 2010 at 8:02 pm

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

    # February 6, 2010 at 10:57 pm

    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’);
    });
    });
    # February 10, 2010 at 9:13 pm

    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.

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".