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重構/避免重複

回答

相關問題