0

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

$('#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 上。

4

5 回答 5

3

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

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));
于 2012-07-31T04:53:18.827 回答
0

我的意思是……如果它总是从……开始，#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');
});
于 2012-07-31T04:53:21.913 回答
0

你可以这样做：

(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 上提供更好的服务

于 2012-07-31T04:53:31.290 回答
0

我会几乎完全在 CSS 中执行此操作。仅使用.toggleClass()和确定 CSS 中显示的内容和隐藏的内容。

于 2012-07-31T05:31:28.950 回答
0 
(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'));
})();
于 2012-07-31T06:54:29.687 回答