0

I've got two huge scripts that are basically duplicates with only minor differences. They run the same exact animations and commands, but one function applies to a set of images. the second to the text navigation. I've been trying to figure out how to combine these into one, and they stop working, or half stops working. Maybe somebody can show me what it would look like if I combine these.

Basically, I want to combine the two bottom segments.

$('.square-container').on('click', '.square', function(event) { 
if ( $(this).hasClass('active') ) { /* and so on */

and

$('.main-nav,.reg3,.privacy_policy,.subnav').on('click', '.main', function(event) {
if ( $(this).hasClass('aa') ) { /* and so on */

Here's the idea of what failed attempt:

$('.square-container','.main-nav,.reg3,.privacy_policy,.subnav').on('click', '.square' || '.main', function(event) {    
if ( $(this).hasClass('active') || $(this).hasClass('aa') ) { /* and so on */

Here's a stripped down version of my starting point:

$(document).ready(function(){


$('.square-container').on('click', '.square', function(event) { 

    if ( $(this).hasClass('active') ) {

            /* several animations here to return to start */


        } else if ( $(this).hasClass('one') ) {

            /* several animations for section 1 */

            $('.one').addClass("subbed").stop().animate({ width: '227', height: '320', left: '260', top: '26', opacity: 1}, 600, function() {

            /*load content*/;

             });

             /*Position unselected squares*/    

            /*Select active square*/
            $('.square').removeClass('active');
            $(this).addClass('active');

        } else if {  

            /* several other else if statements to section 2, 3, 4 etc., then finish */


        }   else {          
            alert('nothing');
        }       

    });



/* want to combine the above with below ... */



$('.main-nav,.reg3,.privacy_policy,.subnav').on('click', '.main', function(event) {


    if ( $(this).hasClass('aa') ) {

            /* several animations here to return to start */

        } else if ( $(this).hasClass('ee') ) {

            /* several animations for section 1 */

            $('.one').addClass("subbed").stop().animate({ width: '227', height: '320', left: '260', top: '26', opacity: 1}, 600, function() {

                /*load content*/;

             });

            /*Position unselected squares*/ 

            /*Select active square*/
            $('.square').removeClass('active');
            $(this).addClass('active');

        } 

         else {         
            alert('nothing');
        }       

    }); 








};
3
Contributors
5
Replies
34
Views
4 Years
Discussion Span
Last Post by turpentyne
0

it seems completely inefficient... They're both working, but Anytime I need to make a change to where something animates to, or other changes. I have to go to two locations in the code to do it. The function is essentially on the page twice. It's the set of events that are different.

0

Ah, I get you. You have two functions that do the exact same thing. Yes, that is rather inefficient and sort of defeats the purpose of a function I would say.

You're thinking about it a little backwards. Rather than trying to work in your selectors and options into the function like you were trying, you want to make a named function so that you can call the function name again and again with any selector and options and have it work. You could also make a full blown plugin out of it that could be used on any project if it was designed open enough.

Check out this article on building jQuery plugins http://www.queness.com/post/112/a-really-simple-jquery-plugin-tutorial

Here is a blog article on the different ways to define a function in jQuery. I would go with the third option they are showing there http://www.jquery4u.com/jquery-functions/5-ways-declare-functions-jquery/

Edited by pixelsoul

0

hmmm.. on a couple suggestions, I got rid of some of the anonimity in the statement and it works. Like so:

I changed function(event) to the name of the function itself. Going from this...

$('.square-container,.main-nav,.reg3,.privacy_policy,.subnav').on('click', '.square, .main', function(event)  { });

... to this:

$('.square-container,.main-nav,.reg3,.privacy_policy,.subnav').on('click', '.square, .main', pic_shift);

presto! Now it works.

This question has already been answered. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.