JavaScript重构/避免重复

我需要重构此代码以避免代码重复。JavaScript重构/避免重复

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

来源

2012-07-31 franticfrantic

尝试http://codereview.stackexchange.com – Brad 2012-07-31 04:50:12

我们展示的HTML代码。 – 2012-07-31 04:59:41

可能只需要引用一个命名函数或两个而不是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）如果您想使用建议的替换，您需要将'＃showmore-town'重命名为'＃showmore-towns'（带有S）。

然后在您的切换，你可以参考以下功能：

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

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

来源

2012-07-31 04:53:18 dougajmcdonald

我的意思是......如果它总是要开始#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-31 04:53:21 Ohgodwhy

你可以这样做：

(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.st ackexchange.com

来源

2012-07-31 04:53:31

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

来源

2012-07-31 05:31:28 gilly3

(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-31 06:54:29

JavaScript重构/避免重复

回答

相关问题