これらの繰り返しjQueryセレクタと関数をどのようにDRYしますか？

Question

私はこのスクリプトを作成しましたが、それはうまくいきましたが、それはひどく繰り返され、DRYされなければならないことがわかりました。セレクタに変数を使用する方法を理解していますが、関数を繰り返さない方法はわかりません。誰も助けることができますか？

// JS to add a "More" link to priority announcements when the height is too tall. 
$(document).ready(function(){ 
    // If JS is turned on add a height restriction to the announcement 
    $(".importantNotice .content").addClass("maxHeight"); 
    // If the height is over 245 a "More" link apears 
    if ($('.importantNotice .content').height() >= 245 || $('.importantNotice .content .landing-no-display').length) { 
     $('.importantNotice .more').addClass("show"); 
    } 
    // If the window gets resized it rechecks height 
    $(window).resize(function(){ 
    if ($('.importantNotice .content').height() >= 245 || $('.importantNotice .content .landing-no-display').length) { 
     $('.importantNotice .more').addClass("show"); 
     } 
     if ($('.importantNotice .content').height() < 245 ($.contains('.importantNotice .content').not(':has(.landing-no-display)')) { 
     $('.importantNotice .more').removeClass("show"); 
     } 
    }); 
}); 

Answer 1

私は通常通りresizeイベント

// JS to add a "More" link to priority announcements when the height is too tall. 
$(document).ready(function(){ 
    var importantElem = $(".importantNotice"); 
    var contentElem = importantElem.find('.content'); 
    var moreElem = importantElem.find('.more'); 
    var landingElem = contentElem.find('.landing-no-display'); 

    // If JS is turned on add a height restriction to the announcement 
    contentElem.addClass("maxHeight"); 

    // If the window gets resized it rechecks height 
    $(window).resize(function(){ 
    // If the height is over 245 a "More" link apears 
    if (contentElem.height() >= 245 || landingElem.length) { 
     moreElem.addClass("show"); 
    }else if (contentElem.height() < 245 || landingElem.length == 1) { //using else-if here to minimize the conditional checking 
     moreElem.removeClass("show"); 
    } 
    }).trigger('resize'); //triggering `resize` for first time to aviod duplicate code 
}); 

Answer 2

を使用した場合、特別にパフォーマンスを向上させるために、この方法を行うだろう -

function toggleMore() { 
    var shouldShow = $('.importantNotice .content').height() >= 245 
    || $('.importantNotice .content .landing-no-display').length 

    $('.importantNotice .more').toggleClas("show", shouldShow) 
} 

$(function() { 
    $(".importantNotice .content").addClass("maxHeight"); 

    toggleMore() 
    $(window).resize(toggleMore) 
})