Refactorización de JavaScript / Evitar repetición

Necesito refactorizar esto para evitar la repetición de código.

$('#showmore-towns').toggle(
    function() {
        $('.popularTownsAdditional').show();
        console.log(this);
        $('#showmore-town .showless').show();
        $('#showmore-town .showmore').hide();
        $('#showmore-town').removeClass('sd-dark28').addClass('sd-dark28down');
        return false;
    },
    function() {
        $('.popularTownsAdditional').hide();
        $('.showless').hide();
        $('.showmore').show();
        $('#showmore-towns').addClass('sd-dark28').removeClass('sd-dark28down');
    });

$('#showmore-cities').toggle(
    function() {
        $('.popularCitiesAdditional').show();
        $('#showmore-cities .showless').show();
        $('#showmore-cities .showmore').hide();
        $('#showmore-cities').removeClass('sd-dark28').addClass('sd-dark28down');
        return false;
    },
    function() {
        $('.popularCitiesAdditional').hide();
        $('#showmore-cities .showless').hide();
        $('#showmore-cities .showmore').show();
        $('#showmore-cities').addClass('sd-dark28').removeClass('sd-dark28down');
    });

básicamente, muestra la misma funcionalidad pero solo en diferentes divs con diferentes ID.

preguntado el 31 de julio de 12 a las 05:07

5 Respuestas

Probablemente solo necesite hacer referencia a una o dos funciones con nombre en lugar de las anon.

function showStuff(typeToShow) {
    $('.popular' + typeToShow + 'Additional').show();
    $('#showmore-' + typeToShow + .showless').show();
    $('#showmore-' + typeToShow + .showmore').hide();
    $('#showmore-' + typeToShow).removeClass('sd-dark28').addClass('sd-dark28down');
    return false;
}

function hideStuff(typeToHide) {
    $('.popular' + typeToHide + 'Additional').hide();
    $('#showmore-' + typeToHide + .showless').hide();
    $('#showmore-' + typeToHide + .showmore').show();
    $('#showmore-' + typeToHide ).addClass('sd-dark28').removeClass('sd-dark28down');
}

NOTA: a) Probablemente podrías hacer que estos métodos sean un poco más ingeniosos, ¡pero entiendes la idea! NOTA: b) Deberá cambiar el nombre de '#showmore-town' a '#showmore-towns' (con una S) si desea utilizar la sustitución sugerida.

Luego, en su alternar, podría hacer referencia a estas funciones:

$('#showmore-towns').toggle(showStuff(towns),
hideStuff(towns));

$('#showmore-cities').toggle(showStuff(cities),
hideStuff(cities));

Respondido 31 Jul 12, 09:07

Quiero decir... si siempre va a empezar con #showmore-... podemos resolverlo

$('[id^=showmore-]').toggle(
function() {
    var id = $(this).prop('id');
    id = id.split('-')[1];
    var upperID = id.charAt(0).toUpperCase() + id.slice(1);
    $('.popular'+upperID+'Additional').show();
    $('#showmore-'+id+' .showless').show();
    $('#showmore-'+id+'.showmore').hide();
    $('#showmore-'+id).removeClass('sd-dark28').addClass('sd-dark28down');
    return false;
},
function() {
    var id = $(this).prop('id');
    id = id.split('-')[1];
    var upperID = id.charAt(0).toUpperCase() + id.slice(1);
    $('.popular'+upperID+'Additional').hide();
    $('#showmore-'+id+' .showless').hide();
    $('#showmore-'+id+' .showmore').show();
    $('#showmore-'+id).addClass('sd-dark28').removeClass('sd-dark28down');
});

Respondido 31 Jul 12, 05:07

Podrías hacerlo:

(function() {

    $('#showmore-towns').toggle(
        function() { showmorelessOn('#showmore-town'); },
        function() { showmorelessOff('#showmore-town'); }
    );
    $('#showmore-cities').toggle(
        function() { showmorelessOn('#showmore-town'); },
        function() { showmorelessOff('#showmore-town'); }
    );

    var showmorelessOn = function(context) {
        $('.popularCitiesAdditional').show();
        $('.showless', context).show();
        $('.showmore', context).hide();
        $(context).removeClass('sd-dark28').addClass('sd-dark28down');
        return false;
    };
    var showmorelessOff = function(context) {
        $('.popularCitiesAdditional').hide();
        $('.showless', context).hide();
        $('.showmore', context).show();
        $(context).addClass('sd-dark28').removeClass('sd-dark28down');
    };

})();

aunque estoy de acuerdo, tal vez podría estar mejor servido en codereview.stackexchange.com

Respondido 31 Jul 12, 05:07

Haría esto casi en su totalidad en el CSS. Uso único .toggleClass() y determinar qué se muestra y qué se oculta en el CSS.

Respondido 31 Jul 12, 06:07

(function() {

    $('#showmore-towns').toggle(
        function() { showmorelessOn.call($('#showmore-town')); },
        function() { showmorelessOff.call($('#showmore-town')); }
    );
    $('#showmore-cities').toggle(
        function() { showmorelessOn.call($('#showmore-town')); },
        function() { showmorelessOff.call($('#showmore-town')); }
    );

    var showmorelessOn = function() {
        $('.popularCitiesAdditional').show();
        $('.showless', this).show();
        $('.showmore', this).hide();
        $(this).removeClass('sd-dark28').addClass('sd-dark28down');
        return false;
    };
    var showmorelessOff = function() {
        $('.popularCitiesAdditional').hide();
        $('.showless', this).hide();
        $('.showmore', this).show();
        $(this).addClass('sd-dark28').removeClass('sd-dark28down');
    };

})();



(function() {

    $('#showmore-towns').toggle(
        function() { showmoreless(); }
    );
    $('#showmore-cities').toggle(
        function() { showmoreless(); }
    );

    var showmoreless = function() {
           if(this.hasClass('sd-dark28'){
            $('.popularCitiesAdditional').show();
            $('.showless', this).show();
            $('.showmore', this).hide();
            $(this).removeClass('sd-dark28').addClass('sd-dark28down');
       }
     else
       {
      $('.popularCitiesAdditional').hide();
            $('.showless', this).hide();
            $('.showmore', this).show();
            $(this).addClass('sd-dark28').removeClass('sd-dark28down');
      }
}.bind($('#showmore-town'));
})();

Respondido 31 Jul 12, 08:07

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.