each() -Funktion. Kann jemand mir raten, wie man diesen Code kürzt

Question

Der Code, den ich unten habe, funktioniert gut, aber ich bin sicher, dass es mehr stromlinienförmig sein könnte.

Das Skript ändert die Größe eines Bildes und positioniert es horizontal in der Mitte des enthaltenen div, unabhängig von der Bildschirmgröße.

Die beiden Funktionen innerhalb der Funktion "resizeBg" sind identisch, abgesehen davon, dass sie auf verschiedene divs (".block1" und ".block2") zeigen, die ein Bild mit einer anderen Klasse (".bg1" und ". bg2 ").

Ich brauche die Funktion resizeBG, die separat auf jedes div angewendet wird. Ein Bild könnte ein Porträt sein, während das andere eine Landschaft darstellen könnte, so dass das Ergebnis abhängig von den Bildproportionen unterschiedlich ist. Dies ist der einzige Weg, wie ich das jetzt zur Arbeit bringen kann, aber mir ist klar, dass es viel einfacher/ordentlicher sein könnte.

HTML

<div class="block block1"> 
    IMAGE 
</div> 
<div class="block block2"> 
    IMAGE 
</div> 

CSS

.block1 {background: #000000;} 
.block2 {background: ffffff;} 

.block { 
    float: left; 
    width: 50%; 
    height: 100%; 
    overflow: hidden; 
    } 

.bgwidth { 
    width: 100%; 
    } 

.bgheight { 
    height: 100%; 
    } 

jQuery

jQuery(window).load(function() { 
// FULLSCREEN BACKGROUND IMAGE 
var theWindow = $(window); 
var block1 = $('.block1'); 
bg1 = block1.children(".bg1"); 
var block2 = $('.block2'); 
bg2 = block2.children(".bg2"); 
aspectRatio1 = bg1.width()/bg1.height(); 
aspectRatio2 = bg2.width()/bg2.height(); 

function resizeBg() { 

    $('.block1').each(function() { 
     if ((block1.width()/block1.height()) < aspectRatio1) { 
      bg1.removeClass('bgwidth').addClass('bgheight'); 
      if(bg1.width() > block1.width()) { 
       bg1.each(function(){ 
        //get width (unitless) and divide by 2 
        var hWide = ($(this).width() - block1.width())/2; 
        // attach negative and pixel for CSS rule 
        hWide = '-' + hWide + 'px'; 
        $(this).addClass("js-fix").css({ 
         "margin-left" : hWide 
         }); 
        }); 
       } 
      else { 
       bg1.each(function(){ 
        $(this).removeClass("js-fix").css({ 
         "margin-left" : 0 + 'px' 
         }); 
        }); 
       }; 
     } else { 
      bg1.removeClass('bgheight').addClass('bgwidth'); 

      bg1.each(function(){ 
       $(this).removeClass("js-fix").css({ 
        "margin-left" : 0 + 'px' 
       }); 
      }); 
     } 

    }); 




    $('.block2').each(function() { 
     if ((block2.width()/block2.height()) < aspectRatio2) { 
      bg2.removeClass('bgwidth').addClass('bgheight'); 
      if(bg2.width() > block2.width()) { 
       bg2.each(function(){ 
        //get width (unitless) and divide by 2 
        var hWide = ($(this).width() - block2.width())/2; 
        // attach negative and pixel for CSS rule 
        hWide = '-' + hWide + 'px'; 
        $(this).addClass("js-fix").css({ 
         "margin-left" : hWide 
         }); 
        }); 
       } 
      else { 
       bg2.each(function(){ 
        $(this).removeClass("js-fix").css({ 
         "margin-left" : 0 + 'px' 
         }); 
        }); 
       }; 
     } else { 
      bg2.removeClass('bgheight').addClass('bgwidth'); 

      bg2.each(function(){ 
       $(this).removeClass("js-fix").css({ 
        "margin-left" : 0 + 'px' 
       }); 
      }); 
     } 

    }); 


} 

theWindow.resize(function() { 
    resizeBg(); 
}).trigger("resize"); 

});

Answer 1

Also ich gave it a shot. Im Grunde müssen Sie nur Ihren Code umgestalten, so dass er generischer ist und an jedem Element in Ihrem jQuery-Objekt arbeiten kann. Ich bin mir nicht sicher, ob dies genau das ist, was Sie wollen, ich habe nicht wirklich viel auf das geachtet, was im Code vor sich ging, ich habe es nur generisch gemacht, damit Sie nicht denselben Code zweimal schreiben müssen. Es kann möglicherweise weiter refaktoriert werden, das ist nur, um Ihnen eine Idee zu geben, was Sie tun sollten.

Answer 2

$('.block').each(function() { 
    var $block = $(this), 
    blockWidth = $block.width(), 
    blockHeight = $block.height(), 
    blockRatio = blockWidth/blockHeight, 
    className = $block.attr('class'), 
    $bg = $('.bg' + className.substr(className.length-1)), 
    bgWidth = $bg.width(), 
    bgHeight = $bg.height(), 
    bgRatio = bgWidth/bgHeight; 

    if (blockRatio < bgRatio) { 
     $bg.removeClass('bgwidth').addClass('bgheight'); 
     if(bgWidth > blockWidth) { 
      $bg.addClass('js-fix') 
      .css('margin-left', 
      '-' + ((bgWidth - blockWidth)/2) + 'px'; 
     } else { 
      $bg.removeClass('js-fix').css('margin-left','0'); 
     } 
    } else { 
     $bg.removeClass('bgheight').addClass('bgwidth') 
     .removeClass('js-fix').css('margin-left','0'); 
    } 
}); 

FYI: 0px === === 0pt 0em === 0