Forums

Give help. Get help.

  • # May 2, 2013 at 12:25 am

    Hi,

    I’m curious if anyone can suggest a cleaner, more efficient method for writing the following jQuery. The code seems to be redundant in certain places…Any help or suggestions are appreciated. Thank You!

    $(‘#one’).click(function () {
    $(‘.two’).fadeTo(400, 0.5);
    $(‘.one’).fadeTo(400, 1);
    return false;
    });

    $(‘#two’).click(function () {
    $(‘.one’).fadeTo(400, 0.5);
    $(‘.two’).fadeTo(400, 1);
    return false;
    });

    $(‘#all’).click(function () {
    $(‘.one, .two’).fadeTo(400, 1);
    return false;
    });

    # May 2, 2013 at 1:40 am

    I’m not sure I really like this solution, but it’s a lot more flexible in terms of adding more and more items.

    http://codepen.io/ggilmore/pen/c2ff9d85937f4f62cf1bbf6024552321

    # May 2, 2013 at 5:22 pm

    My method is definitely a better way to go, I think.

    Here it is with your markup: http://codepen.io/ggilmore/pen/db239cfbc984feab0c4679abddf51841

    # May 2, 2013 at 5:29 pm

    It’s fancy shmancy SCSS.

    Example using CSS:

    .something {
    /* styles */
    }

    .something.active {
    /* different styles */
    }

    SCSS:

    .something {
    /* styles */

    &.something {
    /* different styles */
    }
    }

    # May 2, 2013 at 5:37 pm

    Sure, if you want to think of it that way. `&` simply means: Use the parent selector and tack this on *directly* to it. Emphasis added because there’s a big difference if you don’t include the `&`.

    Example A:

    .something {
    /* styles */

    .active {
    /* different styles */
    }
    }

    Example B:

    .something {
    /* styles */

    &.active {
    /* different styles */
    }
    }

    Example A will render:

    .something {
    /* styles */
    }

    .something .active { /* note the _space_ between .something and .active */
    /* different styles */
    }

    Example B will render:

    .something {
    /* styles */
    }

    .something.active { /* no _space_ between .something and .active */
    /* different styles */
    }

    # May 2, 2013 at 5:46 pm

    Updated it: http://codepen.io/ggilmore/pen/db239cfbc984feab0c4679abddf51841

    Just need to add the active class to each of the boxes and the ‘All’ nav item.

    # May 2, 2013 at 5:50 pm

    > Just need to add the active class to each of the boxes and the ‘All’ nav item.

    That’s probably a better way to do it but it’s easier to just add `$(‘.nav .all’).click();` after the click listener.

    # May 2, 2013 at 6:20 pm

    @CrocoDillon, I thought about that, actually. At the end of the day, if I can do it without JS, that’s my choice.

    # May 3, 2013 at 1:54 pm

    Did someone just say without JS?!?1+1

    http://codepen.io/Merri/pen/aEfhj

    Sorry. My bad.

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

You must be logged in to reply to this topic.

icon-anchoricon-closeicon-emailicon-linkicon-logo-staricon-menuicon-nav-guideicon-searchicon-staricon-tag