JavaScript 重构/避免重复

Question

我需要重构它以避免代码重复。

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

基本上，它显示相同的功能，但仅在具有不同 ID 的不同 div 上。

Answer 1

可能只需要引用一两个命名函数而不是匿名函数。

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

注意:a) 您可能可以使这些方法变得更巧妙一些，但您明白了! 注意:b) 如果您想使用建议的替换，则需要将“#showmore-town”重命名为“#showmore-towns”(带 S)。

然后在您的切换中您可以引用这些函数:

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

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