How to repeat a function for different selectors?

Question

I'm trying to get a handle on proper jQuery syntax and functions. I'm not sure I'm doing this in an efficient way. Here is my function that I'm storing as a variable so I can repeat it:

var addProduct = function()  {          
        $('#' + thisProduct).addClass('added');
        $('#' + thisProduct + ' .more-info').addClass('hide');
        $('#' + thisProduct + ' .panel-collapse').removeClass('in');
};

And then this is how I am using it:

$('#purple-shirt .add').click(function(){

        thisProduct = 'purple-shirt';   
        addProduct();
        // plus something unique to this product
        $('.something-different').show();
});
...
$('#green-shoe .add').click(function(){

        thisProduct = 'green-shoe'; 
        addProduct();
        // plus something unique to this product
        $('.another-thing').addClass('foo');

});

I feel like maybe this is a really weird way to do it? I have to redefine the variable each time.

I thought maybe I could do an each function, like this:

$('.add').each(function(){

     $(this).parent().click(function() {                    

     });

});

But I got thrown off because some of the "products" will have unique actions in addition to the repeating function, that aren't always directly related to parent() or closest() etc... There are lot of things happening with each different product.

The code I'm using works - I'm just not sure it's the right way or very efficient.

Thanks!

how it works `thisProduct` is not defined in `addProduct` function? — Mritunjay, Sep 04 '14 at 01:56
What you're doing is exactly right -- put the common code in a function, and call it from the event handlers. The unique code goes in the event handlers. — Barmar, Sep 04 '14 at 01:58
I suppose it works because I define thisProduct inside the other two click events before I call the addProduct function — Lindsay, Sep 04 '14 at 01:58
Thanks Barmar. Am I handling the `thisProduct` variable properly? Be defining it in each event before I call the function? — Lindsay, Sep 04 '14 at 02:01
In general: If you want to reuse some code, make a function out of it. The things that are dynamic/variable become parameters of the function. — Felix Kling, Sep 04 '14 at 02:17

egig · Accepted Answer · 2014-09-04T03:30:45.410

1

You probably want to pass the variable to addProduct function, so you don't have to create a variable again.

var addProduct = function(thisProduct)  {          
        $('#' + thisProduct).addClass('added');
        $('#' + thisProduct + ' .more-info').addClass('hide');
        $('#' + thisProduct + ' .panel-collapse').removeClass('in');
};

use it:

   addProduct('purple-shirt');

Or even better:

var addProduct = function(thisProduct)  {
        var $product = $('#' + thisProduct);

        $product.addClass('added');
        $('.more-info', $product).addClass('hide');
        $('.panel-collapse', $product).removeClass('in');
};

edited Sep 04 '14 at 03:30

answered Sep 04 '14 at 02:01

egig

4,370
5
29
50

Ahhh! That's exactly what I was looking for. It seemed clunky to keep writing `thisProduct = 'purple-shirt'` each time. I'm going to try this now. – Lindsay Sep 04 '14 at 02:02
Yep. That is much nicer. Thank you. Now, if I wanted to create a `deleteProduct` function, can I also use `thisProduct` again as the variable? Or will that compete with the `addProduct` function? – Lindsay Sep 04 '14 at 02:06
it depends on where you are using `deleteProduct` function and where `thisProduct` variable defined. take a look into 'variable scope' http://stackoverflow.com/questions/500431/what-is-the-scope-of-variables-in-javascript – egig Sep 04 '14 at 02:09
It would be a separate event on a different selector. Like: `$('#purple-shirt .trashcan').click(function(){ deleteProduct('purple-shirt'); })` – Lindsay Sep 04 '14 at 02:12
"will that compete with the addProduct function?" in your case, no I guess not. – egig Sep 04 '14 at 02:14

KimCoding · Answer 2 · 2014-09-04T02:09:19.943

What if you do it this way?

var addProduct = function(productName)  {          
        $('#' + productName).addClass('added');
        $('#' + productName + ' .more-info').addClass('hide');
        $('#' + productName + ' .panel-collapse').removeClass('in');
};


$('.add').click(function(event){
    addProduct(event.toElement.parentNode.id); 
});

or

$('.add').parent().click(function(event){
    addProduct(event.toElement.id);        
});

score 0 · Answer 3 · edited Sep 04 '14 at 03:08

Here i write an alternative: http://jsfiddle.net/xw85bdkc/2/

(function () {
    var extra = {
        green: function () {
        //put extra codes
        console.log('green callback');
        }
    };

    $('.add').parent().on('click', function (e) {
        var product = e.currentTarget;
        addProduct(product, extra[product.id]);
    });

    function addProduct(product, callbackExtra) {
        $(product).addClass('added');
        $(product).find('.more-info').addClass('hide');
        $(product).find('.panel-collapse').removeClass('in');

        if (callbackExtra) {
            callbackExtra();
        }
    }
})();

;)

How to repeat a function for different selectors?

3 Answers3