Combine these two functions

[turpentyne]

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');
        }       

    }); 








};

[EvolutionFallen]

Haven't tried it, but what about instead of '.square' || '.main' you use '.square, .main'?

[pixelsoul]

Why do you need to combine them? Are they not working correctly as separate functions?

[turpentyne]

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.

[pixelsoul]

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/

[turpentyne]

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.