Estoy tratando de manejar la sintaxis y funciones jQuery adecuadas. No estoy seguro de estar haciendo esto de manera eficiente. Aquí está mi función que estoy almacenando como una variable para poder repetirla:

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

Y así es como lo estoy usando:

$('#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');

});

Siento que tal vez esta es una forma realmente extraña de hacerlo. Tengo que redefinir la variable cada vez.

Pensé que tal vez podría hacer una función para cada uno, así:

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

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

     });

});

Pero me desconcertaron porque algunos de los "productos" tendrán acciones únicas además de la función de repetición, que no siempre están directamente relacionadas con parent () o el más cercano (), etc. Hay muchas cosas que suceden con cada Producto diferente.

El código que estoy usando funciona: simplemente no estoy seguro de que sea la forma correcta o muy eficiente.

¡Gracias!

1
Lindsay 4 sep. 2014 a las 05:54

3 respuestas

La mejor respuesta

Probablemente desee pasar la variable a la función addProduct, por lo que no tiene que crear una variable nuevamente.

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

Úsalo:

   addProduct('purple-shirt');

O mejor:

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

        $product.addClass('added');
        $('.more-info', $product).addClass('hide');
        $('.panel-collapse', $product).removeClass('in');
};
1
egig 4 sep. 2014 a las 03:30

Aquí escribo una alternativa: 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();
        }
    }
})();   

;)

0
Bren 4 sep. 2014 a las 03:08

¿Qué pasa si lo haces de esta manera?

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

O

$('.add').parent().click(function(event){
    addProduct(event.toElement.id);        
});
0
KimCoding 4 sep. 2014 a las 02:09