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

可能只需要引用一个或两个命名函数而不是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');
}

注意：a）你可能会让这些方法更加流畅，但你明白了！注意：b）如果您想使用建议的替换，您需要将'#lovemore-town'重命名为'＃showmore-towns'（带有S）。

然后在你的切换中你可以参考这些功能：

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

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

Answer 2

我的意思是......如果它始终以#showmore-开始...我们可以解决它

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

Answer 3

你可以这样做：

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

})();

虽然我同意，但也许可以更好地服务于codereview.stackexchange.com

Answer 4

我几乎完全会在CSS中这样做。仅使用.toggleClass()并确定CSS中显示的内容和隐藏的内容。

Answer 5

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

JavaScript重构/避免重复

5 个答案: